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

re: float breaking out of box

Jeff wrote:
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.

re: float breaking out of box

Jeff schrieb:
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)

re: float breaking out of box

In article <QamdnTMcIKERG1vVnZ2dnUVZ_j6dnZ2d@earthlink.com> ,
Jeff <jeff@spam_me_not.comwrote:
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

re: float breaking out of box

dorayme wrote:

Hello Dorayme,
Thanks, Lost in the clutter!That I had forgotten.
ButThat 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 inIt was indeed!

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

Thanks,
Jeff

re: float breaking out of box

Thomas Mlynarczyk wrote:I find this absolutely fascinating. I had never used the after pseudo
element.Thanks. I'm still soaking some of it up...

Jeff