By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,947 Members | 1,548 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,947 IT Pros & Developers. It's quick & easy.

float breaking out of box

P: n/a
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
Sep 9 '08 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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.
Sep 9 '08 #2

P: n/a
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)
Sep 9 '08 #3

P: n/a
In article <Qa******************************@earthlink.com> ,
Jeff <jeff@spam_me_not.comwrote:
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
Sep 10 '08 #4

P: n/a
dorayme wrote:

Hello Dorayme,
In article <Qa******************************@earthlink.com> ,
Jeff <jeff@spam_me_not.comwrote:
> 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
>
Sep 10 '08 #5

P: n/a
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
Sep 10 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.