> i was always under the impression that if you floated your elements that
> essentially would clear them also. is that not the case? any help in
> understanding this would be great.
That is not the case. Floating an element means that it will shrink to fit its
contents (or shrink to the width you gave it) and let other stuff come up next
to it. So, let's say I have 3 divs.
<div id="div1" class="col">
</div>
<div id="div2" class="col">
</div>
<div id="div3" class="col">
And I style them like this:
div.col {
float: left;
width: 33%;
}
Then I end up with a three column layout. The first div takes up a third of
the page. Then, since there's enough room for the second div up next to the
first one, it floats up to take up some space. And then, since there's still
room next to the second one, the third div also floats up.
But let's say I wanted div 3 not to float up, but to stay below div 1.
Then if I add
div#div3 {
clear: left;
}
Then it won't float up next to the left floated divs.
I could also do this instead (same html):
Div#div1 {float: right}
Div#div2 {float: right}
Div#div3 {float: right; clear: left}
I this case, div1 one will be on the far right side, div 2 will be floated up
next to div1 in the middle, and div three will be floated up next to div 2 on
the left side.
But we told it to clear!
But we told it to clear LEFT. It's below all the things there are floated left
(because there aren't any. Everything is floated right). If we clear: right,
then it'll drop below divs 1 and 2 again.
Now, let's do clear: both.
Same HTML.
div#div1 {float: left}
div#div2 {float: right}
now div1 is on the left side, and div2 is on the right side, and div three
(since it's not floated) comes up between those two divs, and then continues
wrapping below them, like this:
content of div content of div3 div 2 content
1. content of content of div3
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear right, then it'll start below div 2, like this:
content of div div 2 content
1. content of
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear both, it'll start below both divs, like this:
content of div div 2 content
1. content of
Div 1.
Content of div 3. Content of dive 3 content of d
This is the same as clear: left in this case. But if div2 had more content,
then clear left would start below div1, and bump up against div2.
That was really long, but I think it's about as clear as I could make it.
---Tim
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
