SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member alzamabar's Avatar
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy How the <div> order affects the layout with the float and clear properties

    Hi, I'm reading HTML Utopia, Designing without tables using CSS. I'm on chapter six, on page 138, where the author explains how to create balanced columns without using JavaScript. Written the stylesheet, everything boils down to the <div> elements placed in the page. Now in the stylesheet we have three elements: #left, #center and #right, inside a #wrapper element so that all of those get resized together.

    The HTML shows those elements as:

    <div id="wrapper">
    <div id="left">
    <!-- left column content -->
    </div>
    <div id="right">
    <!-- right column content -->
    </div>
    <div id="center">
    <!-- center column content -->
    </div>
    <!-- Clears to both left and right -->
    <div id="clear"></div>
    </div>
    <div id="footer">
    <!-- Footer content -->
    </div>

    and everything is fine.

    However, carrying on from chapter 5, I just modified the original example, where the order was:

    left
    center
    right

    The reason for this post is that if I keep the above order with the new stylesheet (which declared left: float left; right: float right) the right column's top margin start not in line with the other two div elements.

    However, if I write the new order:

    left
    right
    center

    everything is shown rightly aligned.

    Why does this happen? I was expecting that because we defined the stylesheet elements, the order in which we positioned the <div> elements inside the page didn't matter. I'm using Windows XP SP2, IE6

    Thanks for any answer, especially from the author, if possible.

    Marco

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I guess you've learned thai it does matter.
    If you foat something right, it won't jump up to the top of the page - it will float to the right of where it would be otherwise. Elements below it in the code will wrap around it. When you have one element floaing left, it allows the next eelement - the one that's floating right to be as high up on the screen as it. As both of those are floated, the next element is also able to position itself at the same level.

    I hope this helps.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    BonRouge is correct Floats only float from where they are - its the following content that wraps around. Even if you float something to the right it still needs to be before the static content it is floating against.

    You can change the order of floats but only by wrapping them in another div and use some very complicated code as in this example.

    http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

    This is a floated layout that allows the content to be first in the html. However it would take me a while to explain so I only show it for example

    Paul


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
  •