On Fri, Sep 18, 2009 at 10:48 AM, Climis, Tim <[email protected]> wrote:
> > 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
>
Tim,
thanks for the detailed explanation. this helps a lot and i can definitely
move forward with the debugging with a better grasp on how i'll need to use
my floats and clears.
Cheers,
Jeff
______________________________________________________________________
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/
