Clear issue

[shapper]

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}

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?

Thanks,
Miguel

[Michael Fesser]

..oO(shapper)

>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}

This does not work well.

What's the problem?

Micha

[shapper]

Well,

If I place content inside them or after it in other divs in some
situations the content get outside of the div.

Try to place a border and u will see that the top border will be closed
to the bottom border.

Something like overlay.

Anyway, the clear div solves it.

I just don't understand why,

Thanks,
Miguel

Michael Fesser wrote:

.oO(shapper)

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}

This does not work well.

What's the problem?

Micha

[patrick j]

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>

[Michael Fesser]

..oO(shapper)

>If I place content inside them or after it in other divs in some
situations the content get outside of the div.

Try to place a border and u will see that the top border will be closed
to the bottom border.

Something like overlay.

Yep, because in this case the outer div is completely empty. The inner
divs are floated, hence taken out of the normal flow.

>Anyway, the clear div solves it.

Setting the outer div to "overflow: hidden" does the same - it expands
the div so it contains the floats.

Micha