SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mixing Absolute, Relative, Float

    Hi All,

    Some background on what I'm currently trying to do is in my General CSS Approach thread.

    I'm fairly comfy with what Absolute & Relative DIVs do, and Float too although I haven't practiced it much yet. My problem is trying to 'get' the concept properly so that I'll know how to use them together once I have a layout planned.

    Probably the other relevant ingredient is my current tendency to use nested DIVs in the 'map/box' approach I mentioned in the other thread. Assuming map/box is still a valid method...

    Are there some general principles for what I want to do? I haven't found such in any of the sites where I've learned this stuff. Some examples of fictitious guidelines would be:

    • Always make your top-level boxes Absolute
    • Float doesn't work in nested Relative DIVs
    • Don't use Relative DIVs for boxes which go under an Absolute DIV


    If I have to "suck it and see", then so be it. But I don't want to reinvent the wheel either - especially as my early attempts will probably produce ovals

    Thanks for any help
    Last edited by Mike Feury; Apr 29, 2002 at 18:05.

  2. #2
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree, a simple list tlike this would be useful, as I tend to go through this voyage of deiscovery for every page template I build. Every time I find quirks, for example float not floating or causing alignment on nearby elements to behave inappropriately.

    Look forward to seeing what others put.

    I'll add to this if I ever get round to compiling such a list too!
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  3. #3
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Miami, Florida - Caracas, Venezuela
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have an exact answer to your question but I've been up all night trying this for my own site and I think I know (more or less) the difference between absolute, relative and float.

    Absolute seems to be (and I might be wrong) refering to the position of the layer in relation to the browser window.

    Relative is in relation to where the layer is located in the code. So if you have it nested inside another layer the positioning will be in reference to the upper left corner of the parent layer.

    Look at my test and you'll see how I used Float. I wanted to create a three column layout inside a DIV and relative was not allowing me to do this. I tried float and it worked.

    You'll find my tests in this post: http://www.sitepointforums.com/showt...threadid=59391
    Luis

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Luis,

    Originally posted by lgomez
    Absolute seems to be (and I might be wrong) refering to the position of the layer in relation to the browser window.
    No, Absolute is in relation to the Parent element. Stick an Absolute inside another <div>, or scroll the page, and you'll see this.
    Many times the Parent is the <body>, so it appears to be relative to the browser window.

    Fixed positioning is relative to the browser window [technically, the "viewport"], but I haven't played with it yet as almost no browser supports it. Fixed is the value which is supposed to keep a <div> visible at all times, eg when the browser is scrolled.

    Relative is in relation to where the layer is located in the code. So if you have it nested inside another layer the positioning will be in reference to the upper left corner of the parent layer.
    Not quite. Relative is badly named - what you describe here is Absolute. Relative is relative to where the element would be if there was no <div> around it.

    "Offset" would have been a much better name for this. Take a paragraph for example. As just a <p>, say it would lie flush left and 15px down from the element above. Put a Relative <div> around the <p> and you can use the Left & Top properties to change those values.

    It seems most useful where you don't want to set specific co-ordinates for the top left corner, but rather want to specify an offset from another element. Hope I'm clear, not too easy to explain

    I'll have a look at your tests in the other thread now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •