Div leaking from other div

Please look my example and tell me
CANT I USE A DIV WITH FLOAT INNER A DIV WITHOUT FLOAT?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-
br">

<head>
<title>Float</title>
</head>
<body>

<div style="border: solid 1px red;">
Look this example!
<div style="float: left; border: solid 1px blue;">
Why this content leaks from de above div?<br/>
This hapen every time I put a div with float:left inner other div
without float:left<br/>
This behavior occur on IE7 and FF. I dont know about IE6.<br/>
Please Help-me!<br/>
=]<br/>
</div>
</div>

</body>
</html>

On 6 Aug, 12:51, Neviton <nevito...@gmail.comwrote:

Quote:

Please look my example and tell me
CANT I USE A DIV WITH FLOAT INNER A DIV WITHOUT FLOAT?

Yes you can, and this is what it does. When you "float" something, it
comes out of the normal page flow. This means that its parent no
longer has to wrap all around it, so we see this "leakage". It's not a
leak though, it's deliberate.

Try reading this:
http://brainjar.com/css/positioning/
Best explanation I know for floats.

Thank you Andy

I'II read the explanation about floats.

Neviton wrote:

Quote:

Please look my example and tell me
CANT I USE A DIV WITH FLOAT INNER A DIV WITHOUT FLOAT?

I believe that you're asking why your floated div, nested inside a
non-floated/non-positioned div, is outside of the container block.

The reason is that "a float is out of the normal flow" and therefore
presents no content to the container.

There are three ways to place it within the container:
1. Put it in the normal flow by not making it a float.
2. Remove the container from the normal flow by making it also a float.
3. Remove the container from the normal flow by giving it
position:absolute; or position:fixed;.

--
Gus

..oO(Gus Richter)

Quote:

>Neviton wrote:

Quote:

>Please look my example and tell me
>CANT I USE A DIV WITH FLOAT INNER A DIV WITHOUT FLOAT?

>
>I believe that you're asking why your floated div, nested inside a
>non-floated/non-positioned div, is outside of the container block.
>
>The reason is that "a float is out of the normal flow" and therefore
>presents no content to the container.
>
>There are three ways to place it within the container:
>1. Put it in the normal flow by not making it a float.
>2. Remove the container from the normal flow by making it also a float.
>3. Remove the container from the normal flow by giving it
>position:absolute; or position:fixed;.

4. Apply overflow: hidden; to the container.

Micha

Michael Fesser wrote:

Quote:

.oO(Gus Richter)
>

Quote:

>Neviton wrote:

Quote:

>>Please look my example and tell me
>>CANT I USE A DIV WITH FLOAT INNER A DIV WITHOUT FLOAT?

>I believe that you're asking why your floated div, nested inside a
>non-floated/non-positioned div, is outside of the container block.
>>
>The reason is that "a float is out of the normal flow" and therefore
>presents no content to the container.
>>
>There are three ways to place it within the container:
>1. Put it in the normal flow by not making it a float.
>2. Remove the container from the normal flow by making it also a float.
>3. Remove the container from the normal flow by giving it
>position:absolute; or position:fixed;.

>
4. Apply overflow: hidden; to the container.
>
Micha

You are right. I had forgotten. In fact overflow:hidden; :scroll; or
:auto; will work.

--
Gus

In article
<e581ada4-133c-4ace-bdc9-c128548e962d@k13g2000hse.googlegroups.com>,
Neviton <nevitones@gmail.comwrote:

Quote:

Please look my example and tell me
CANT I USE A DIV WITH FLOAT INNER A DIV WITHOUT FLOAT?

<http://netweaver.com.au/floatHouse/>

reviews a few ways to get a container to grow height to house its
floated children which you might find helpful.

--
dorayme

Div leaking from other div

re: Div leaking from other div

re: Div leaking from other div

re: Div leaking from other div

re: Div leaking from other div

re: Div leaking from other div

re: Div leaking from other div

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about