shapper wrote:
Hello,
Consider the following design:
<div id="container">
<div id="A" class="A"></div>
<div id="B" class="B"></div>
</div>
And the CSS classes:
.A {float:left; clear:left}
.B {float:left; clear:right}
As I understand it a floated element is taken out of the flow of the
document. This means that if you float all the elements within a
containing div then there is no content at all for the containing div.
This does not work well. So I always do as follow:
<div id="container">
<div id="A" class="A"></div>
<div id="B" class="B"></div>
<div id="clear" class="clear"></div>
</div>
Where:
.A {clear:both}
This always happens when I have divs inside other divs.
Does anyone knows how to solve this?
Well as I understand it if you float everything within a containing div
then you can put an additional empty div at the end which is not
floated and has declaration clear: both; applied to it.
This clear declaration on the empty div element will create content
that fills the entire containing div because the clearing declaration
"sees" the floated elements above and extends the top margin of this
empty div at the end such that it fills the area with the floated
elements. The containing div won't "see" the floated elements but it
will "see" the top margin of the empty div at the end which effectively
surrounds the floated elements.
So...
If we have
#container {border: solid 1px black;}
..A {float: left;}
..B {float: right;}
We won't see any border surrounding para's A and B below
<div id="container">
<p class="A">Stuff</p>
<p class="B">Stuff</p>
</div>
However by including an extra div at the bottom clearing both we will
see the border.
#container {border: solid 1px black;}
..A {float: left;}
..B {float: right;}
..atbottom {clear: both;}
<div id="container">
<p class="A">Stuff</p>
<p class="B">Stuff</p>
<div class="atbottom"></div>
</div>
--
Patrick
Brighton, UK
<http://www.patrickjames.me.uk>