[RESOLVED] Background color help

[robertketter]

in the following code I have a problem. The green div flows outside the red div. I need to know what is missing in my code to expand the red div to contain the green div. The blue div should contain all the divs but the green div flows outside the blue div too.

<div style="background:blue; padding: 10px; width:80%">
<div style="background: yellow; padding: 5px">
<div style="background: red; padding:5px">
1. Is this a question?
<div style="float:right; background: green; padding:10px">
Button 1<br>
Button 2
</div>
</div>
</div>
<div style="background: yellow; padding: 5px; clear:both">
<div style="background: red; padding:5px">
1. Is this a question?
<div style="float:right; background: green; padding:10px">
Button 1<br>
Button 2
</div>
</div>
</div>
</div>

[designer4life]

You'll need to add a div tag right after the red div and that div should contain a 'clear: both' in the style attribute.


<div style="background:blue; padding: 10px; width:80%">
<div style="background: yellow; padding: 5px">
<div style="background: red; padding:5px">
1. Is this a question?
<div style="float:right; background: green; padding:10px">
Button 1<br>
Button 2
</div>
<div style="clear: both;"></div>
</div>
</div>
<div style="background: yellow; padding: 5px; clear:both">
<div style="background: red; padding:5px">
1. Is this a question?
<div style="float:right; background: green; padding:10px">
Button 1<br>
Button 2
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>

[Fang]

<div style="background: red; padding:5px; overflow:hidden; (http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)">

[robertketter]

Both of the people who responded have taught me something new. Both solutions will come in handy and I thank you for your help.:):)