Results 1 to 3 of 3
Feb 22, 2005, 17:20 #1
How the <div> order affects the layout with the float and clear properties
The HTML shows those elements as:
<!-- left column content -->
<!-- right column content -->
<!-- center column content -->
<!-- Clears to both left and right -->
<!-- Footer content -->
and everything is fine.
However, carrying on from chapter 5, I just modified the original example, where the order was:
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:
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.
Feb 22, 2005, 17:54 #2
- Join Date
- Oct 2004
- Sendai, Japan
- 0 Post(s)
- 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.
Feb 22, 2005, 18:04 #3
- Join Date
- Jan 2003
- Hampshire UK
- 182 Post(s)
- 6 Thread(s)
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.
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