Adding float makes nested div tags go out of parent div.

[Jimmy]

I am so puzzled by this.
I've got following html and css of 2 column layout.
css:
div#parent{width:100%;border:solid 1px black;background-color:red;}
div#parent div#left, div#parent div#right{width:50%;}
div#left{float:left}
div#left{float:right}

html:
<div id="parent">
<div id="left">Left column</div>
<div id="right">Right column</div>
</div>

Left and right column line up correctly, they go out of parent div
(=#parent) therefore no red background is showing.

And I got rid of float values from both div#left and div#right which
makes both of them stacked on top of each other. And it stays in
div#parent hence red background appears. I've also tried messing
around with position attribute, but it didn't change anything.

Can anyone help me with this?

 

[Jimmy]

Add overflow: hidden to parent.

Seehttp://netweaver.com.au/floatHouse

Oh...
My..
God...

You have no idea how much I am relieved right now.

Thank you so much!

 

[Jimmy]

Oh...
My..
God...

You have no idea how much I am relieved right now.

Thank you so much!

OK... now. It turns out that I am not quite liberated just yet.
It works on Firefox but no in IE. Is there solution for IE?

 

[richard]

I am so puzzled by this.
I've got following html and css of 2 column layout.
css:
div#parent{width:100%;border:solid 1px black;background-color:red;}
div#parent div#left, div#parent div#right{width:50%;}
div#left{float:left}
div#left{float:right}

html:
<div id="parent">
<div id="left">Left column</div>
<div id="right">Right column</div>
</div>

Left and right column line up correctly, they go out of parent div
(=#parent) therefore no red background is showing.

And I got rid of float values from both div#left and div#right which
makes both of them stacked on top of each other. And it stays in
div#parent hence red background appears. I've also tried messing
around with position attribute, but it didn't change anything.

Can anyone help me with this?

One thing many people do not realize is, a division has a border.
Whether it is visible or not.
So if you have two divisions set to 50% plus the border, don't we wind
up with more than 100%?
Which causes one division to break.
Therefore, we simply drop the % down to say like 48% and you should
see them as intended.

 

[dorayme]

OK... now. It turns out that I am not quite liberated just yet.
It works on Firefox but no in IE. Is there solution for IE?

IE 6 does not *usually* - unlike good browsers - need to be told to grow
height to cover its floats but it depends on the circumstances, see my
remarks below. But when it does need it, the overflow instruction will
not work as you found out. It simply does not take any notice of it
against standard. For IE 6 there are other tactics. You can use a non
floated element before the closing tag of the container; for example, an
empty div styled to clear.

....
<div style="clear: both"></div>
</div>

I have not been able to reproduce your problem on my IE 6. (Now the
proud owner of multiple IEs on my PC!). Probably because you do not
supply enough information of your situation. You do not even mention the
version of IE you are having trouble with.

Best to supply a URL. Have you got a valid HTML doc with, say, a good
doctype declaration at the top to keep it from falling into what is
called quirks mode (a bad mode where wild and unpredictable things
happen)?

 

[rf]

One thing many

I wouldn't say many. I'd say one, or possibly two.

people do not realize is, a division has a border.
Whether it is visible or not.

While technically true your inference is wrong. The border can be 0 width,
in which case and from the recommendation:
"the border edge is the same as the padding edge".
The border is not just invisible, it is not there at all as far as the
layout is concerned.

So if you have two divisions set to 50% plus the border, don't we wind
up with more than 100%?

No we don't. Not when the borders are 0 width. Well, not for the reasons you
infer.

We can add up to more than 100% if the browser has to round to the nearest
pixel. Say the viewport is 801 pixels wide and the two divs are specified as
50%. The browser *may* choose to interpret 50% of 801 as being 401. So we
end up with 802 pixels, wider than the viewport.
This is, however, nothing at all to do with the 0 width borders of those
divs.

Which causes one division to break.

What does "break" mean?

Therefore, we simply drop the % down to say like 48% and you should
see them as intended.

But what, if anything, does all of this have to do with the OPs question
which relates to content escaping a div?

 

[dorayme]

One thing many people do not realize is, a division has a border.
Whether it is visible or not.
So if you have two divisions set to 50% plus the border, don't we wind
up with more than 100%?
Which causes one division to break.
Therefore, we simply drop the % down to say like 48% and you should
see them as intended.

It all depends on what you mean by "break". In good modern browsers the
borders do cause the show to extend to more than the visible width and
the correct response is to bring up scrollbars. But the dropdown of one
of the floats is not - at least not just - this in IE6.

There are two issues in this thread. One is to do with float drop (I
would bet) and your idea of making one of the floats to less than 50%
wide is a reasonable one for this. It has not much to do with the border
in fact. Take a look carefully. Even without a border, with a good
doctype, whether or not the body is margined to nil or not, you can
actually see how IE 6 is trying desperately to calculate how to fit the
floats in. By careful expansion and contraction of the browser widow
width, you can get the floats side by side or have the right drop!

There are a number of ways to fix this. One is to give one of the
floats, say 49% width and the other 49 or 50%. Another is to float one
and not the other, giving one a width and letting the other find its
width (beware if it has eg. an image that is wider than the remaining
space as calculated by IE)

The other issue, and this is an independent issue in many ways, is the
growing of the parent height. The biggest determining factor for this in
IE 6 is if the parent is given an explicit width. Without it, there is
no height (and no red colour). But with a width, it will simply (unlike
good browsers that need a push with an overflow instruction or last
clearing div) have sufficient height. It looks out for its floated
children as long as it has a specified width - unlike 'good' browsers!

I say all this with the understanding that it is not easy to give
general rules for such a seemingly unlawlike browser. To the OP, it is
particularly important to give a URL to see exactly what you are wanting
so particular remedies can be attempted - there are always remedies!

 

[Chaddy2222]

I wouldn't say many. I'd say one, or possibly two.


While technically true your inference is wrong. The border can be 0 width,
in which case and from the recommendation:
"the border edge is the same as the padding edge".
The border is not just invisible, it is not there at all as far as the
layout is concerned.


No we don't. Not when the borders are 0 width. Well, not for the reasons you
infer.

We can add up to more than 100% if the browser has to round to the nearest
pixel. Say the viewport is 801 pixels wide and the two divs are specified as
50%. The browser *may* choose to interpret 50% of 801 as being 401. So we
end up with 802 pixels, wider than the viewport.
This is, however, nothing at all to do with the 0 width borders of those
divs.


What does "break" mean?

Well, the OP had specified 100% on one div and 50% on two others from
what I can get from reading his post. But without a URL it is hard to
tell, as to what he was on about.

But what, if anything, does all of this have to do with the OPs question
which relates to content escaping a div?- Hide quoted text -

He had specified a layout that was more then 100% width, so dropping
some of the % off those widths would have helped.
You were correct on what you wrote about the borders though.