float breaking out of box

I have a floated container that is breaking out of it's containing
block. I don't remember the tricks to fix that (sorry Dorayme).

Jeff

Jeff wrote:

I have a floated container that is breaking out of it's containing
block. I don't remember the tricks to fix that (sorry Dorayme).

Floats don't contribute to the height of their containers, as they are
considered "out of the flow". Therefore, you need some way to give the
container some height.

Some things you can do about this include setting overflow:hidden; (or
any value besides "visible") or position:absolute; on the container.

--
John
The possessive pronoun, "its", has no apostrophe. Even on the Internet.

Jeff schrieb:

I have a floated container that is breaking out of it's containing
block. I don't remember the tricks to fix that (sorry Dorayme).

Here's what I use:

--- common.css ---
#container:after
{
clear: both;
display: block;
height: 0;
content: ".";
visibility: hidden;
}

--- ie.css ---
#container
{
zoom: 1;
height: 1px;
he\ight: auto;
}

--- page.html ---
<link rel="stylesheet" media="all" type="text/css" href="common.css">
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

For standard compliant browsers supporting the content property, we
simply add an additional block at the end of #container and have it
clear the float.

IE does not support the content property, but has a proprietary internal
property called "layout". If this is set, a side effect will be that all
floated children will be enclosed by their #container. To set it (can't
be done directly), use either the proprietary zoom property or assign a
height. The above solution caters for IE5 and above.

Greetings,
Thomas

--
Ce n'est pas parce qu'ils sont nombreux à avoir tort qu'ils ont raison!
(Coluche)

In article <QamdnTMcIKERG1vVnZ2dnUVZ_j6dnZ2d (AT) earthlink (DOT) com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

I have a floated container that is breaking out of it's containing
block. I don't remember the tricks to fix that (sorry Dorayme).

Jeff

Well, Jeff, perhaps you lost the link to my

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

In the face page, see sections 6, 7 and 8.

But, briefly (how I hate brevity):

Use overflow: hidden or overflow: auto on the parent container. But
safest probably is to stick in a non floated child with a style="clear:
both;" on it after the floats. That makes the parent sit up and listen
even for IE6. I say safest because I have seen occasional situations in
IE6 where the parent does not grow height naturally for its floated
children and it will not be forced to do so by overflow instructions. I
recall it was you who brought this to my attention once!

--
dorayme

dorayme wrote:

Hello Dorayme,

In article <QamdnTMcIKERG1vVnZ2dnUVZ_j6dnZ2d (AT) earthlink (DOT) com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

I have a floated container that is breaking out of it's containing
block. I don't remember the tricks to fix that (sorry Dorayme).

Jeff

Well, Jeff, perhaps you lost the link to my

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

Thanks, Lost in the clutter!

In the face page, see sections 6, 7 and 8.

But, briefly (how I hate brevity):

Use overflow: hidden or overflow: auto on the parent container.

That I had forgotten.
But

safest probably is to stick in a non floated child with a style="clear:
both;" on it after the floats. That makes the parent sit up and listen
even for IE6.

That I could not do. I had a bit of javascript that toggled the next
node on/off.

I say safest because I have seen occasional situations in

IE6 where the parent does not grow height naturally for its floated
children and it will not be forced to do so by overflow instructions. I
recall it was you who brought this to my attention once!

It was indeed!

I've been insanely busy, I still have something for you...

Thanks,
Jeff

Thomas Mlynarczyk wrote:

Jeff schrieb:

I have a floated container that is breaking out of it's containing
block. I don't remember the tricks to fix that (sorry Dorayme).

Here's what I use:

--- common.css ---
#container:after
{
clear: both;
display: block;
height: 0;
content: ".";
visibility: hidden;
}

--- ie.css ---
#container
{
zoom: 1;
height: 1px;
he\ight: auto;
}

I find this absolutely fascinating. I had never used the after pseudo
element.

--- page.html ---
link rel="stylesheet" media="all" type="text/css" href="common.css"
!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]--

For standard compliant browsers supporting the content property, we
simply add an additional block at the end of #container and have it
clear the float.

IE does not support the content property, but has a proprietary internal
property called "layout". If this is set, a side effect will be that all
floated children will be enclosed by their #container. To set it (can't
be done directly), use either the proprietary zoom property or assign a
height. The above solution caters for IE5 and above.

Thanks. I'm still soaking some of it up...

Jeff

Greetings,
Thomas