PDA

View Full Version : unwanted behaviour - clear:both clearing an adjacent div



Likeless
Oct 7th, 2009, 08:51 PM
I am having a problem with items in one div clearing an adjacent div.

This is what I am getting:

http://img159.imageshack.us/img159/2352/divclear01.gif



div.red {}

div.green {float:right;}

div.blue {margin-left:158px;}

div.brown {clear:both}


This is what I want:

http://img188.imageshack.us/img188/6303/divclear01a.gif

ie. I want the brown div to not clear the floated green div. I didn't think that it would, as it is inside the blue div. But I seem to be wrong about that.

Can anyone tell me how I would get the behaviour I seek? I cannot use fixed heights as the content length in both the green and blue divs varies.

Obviously not clearing the brown div at all would fix it, but I don't have a choice there, as I need clearing behaviour within the blue div. I just don't want it to also clear on the green div.

Thanks :)

VIPStephan
Oct 7th, 2009, 10:10 PM
Ironically, there was a similar problem earlier today and I athink abduraooft linked to an older post of mine (http://codingforums.com/showpost.php?p=766405&postcount=3). Specifically you need to form a block formatting context with the blue section by floating it, too, so the clear only applies to the contents of the blue section, not the content outside of it.

Likeless
Oct 8th, 2009, 01:04 AM
Thanks. With the help of your post and the page below, I fixed my problem.

http://www.communitymx.com/content/article.cfm?page=1&cid=6BC9D