clear:xxxx troubles

I am having a slight problem.

Currently designing a site. Right now the basic layout principle is

-------------------
[ TOP DIV ]

[ MIDDLE DIV]

--- >[LEFT COLUMN DIV] [RIGHT COLUMN DIV]

[BOTTOM DIV]
--------------------

The left column div and right column div are inside the middle div. Both have float: left assigned to them.

My problem is when I insert <div style="clear:left;"></div> after the right column I lose my background. The background is assigned in the middle div which is basically the container for the who columns. In IE it looks fine, but for some reason in FF the two columns lose their background.

I then tried to just add clear:left; to the bottom div class but it does the same thing.

Why is the clear:left not letting the middle div background show through?

See attatchment for example.

Below is my code

#container_top {
width: 760px;
height: 33px;
background-image: url(images/container_top.jpg);
}

#container_middle {
width: 760px;
background-image: url(images/container_bg.jpg);
}

#container_bottom {
background-image: url(images/container_bottom.jpg);
width: 760px;
height: 33px;
}

#lcolumn {
float: left;
width: 200px;
vertical-align: top;
}

#rcolumn {
float: left;
width: 560px;
vertical-align: top;
}

Code (markup):

and

<div id="container_top"></div>

<div id="container_middle"> 

<div id="lcolumn">Lack of a reply doesn't mean it's impossible Look at your test in IE and FF to see the diffeernce between how these two handle div's. IE will expand the div with width or height set to a non-auto value and FF will overflow it. On top of that IE and FF treat borders differently. Tables never overflow. So, a quick solution is to use tables for what you need. You can also experiment with setting margin-left/right to, say 20% and see if this will help you (the outer div will still overflow, though, when the width is too small).</div>
<div id="rcolumn">Lack of a reply doesn't mean it's impossible Look at your test in IE and FF to see the diffeernce between how these two handle div's. IE will expand the div with width or height set to a non-auto value and FF will overflow it. On top of that IE and FF treat borders differently. Tables never overflow. So, a quick solution is to use tables for what you need. You can also experiment with setting margin-left/right to, say 20% and see if this will help you (the outer div will still overflow, though, when the width is too small).</div>
<div style="clear:left;"></div>

</div>

<div id="container_bottom"></div>

Code (markup):

Any insight would be appreciated.

On a last note I have tried applying backgrounds to the actually columns but FF doesn't like that either

 

Your container_middle frame has no height and collapses through all your floats. This is why you don't have the background. You have two choices - add a border to this div (borders will prevent this div from collapsing) or give it a certain height (you can use min-height with FF.

J.D.

 

Or you can add a height of 1 pixel to the div that is clearing both. This will also give the same effect...
<div style="clear:both; height:1px"></div>