background image disappears with float

[lcapetil]

I am fairly new to css. I've been using tables for years but am drawn to the superior layouts available through css. I am in the process of creating a page with three columns. I also have a repeating background image in a layout div. When I add a float element to one of my columns, the background image disappears. I have been playing around with this for a day and a half with no luck. Any help/suggestions would be a huge help. The css is below followed by the html.

#wrap{
width:755px;
margin:0 auto;
text-align:left;
padding-top: 10px;
}
body{
background-color: #7E7EB1;
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-align:center;
margin:0;
padding:0; /* Need to set body margin and padding to get consistency between browsers. */
}
#layout {
PADDING-RIGHT: 0;
BACKGROUND: url('/images/ICBM/body.gif') repeat-y center top;
MARGIN: 0 0 0 -1px;
WIDTH: 756px;
TEXT-ALIGN: left;
HEIGHT: 100%
}
#contentBody {
PADDING-RIGHT: 8px;
PADDING-LEFT: 8px;
PADDING-BOTTOM: 0;
MARGIN: 0;
PADDING-TOP: 0;
BACKGROUND-COLOR: transparent;
} /* formats the text within the layout */

HTML #contentBody {
PADDING-RIGHT: 8px;
PADDING-LEFT: 12px;
PADDING-BOTTOM: 0px;
WIDTH: 559px;
PADDING-TOP: 0px
}

div.col1{
width:268px;
float:left
}

div.col2{
width:268px;
float:right
}

div.col3{
width:175px;
}

#capTop {
BACKGROUND: url('/images/ICBM/cap_top.gif') no-repeat 50% 100%;
MARGIN: 0 auto;
FONT: 0/0 sans-serif;
PADDING-TOP: 10px;
WIDTH: 755px;
HEIGHT: 8px;
}
#capBottom {
BACKGROUND: url('/images/ICBM/cap_bottom.gif') no-repeat 50% 0%;
MARGIN: 0 auto;
WIDTH: 755px;
HEIGHT: 18px;
TEXT-ALIGN: left;
}

<div id="wrap">
<img src="/images/ICBM_HomeTopImage_03.jpg">
<div id="capTop"></div>
<div id="layout">
<div id="contentBody">
<div class="col1">some text goes in here</div>
<div class="col2">other trex here</div>
</div>
</div>
<div id="capBottom"></div>
</div>

[jfjet]

try adding in the CSS:
---------------
.clr {clear:both;}
---------------

and add in the HTML just under
<div class="col1">...</div>
<div class="col2">...</div>
this line:
-----------------
<div class="clr"></div>
----------------

When you have a floating element, it is technically not part of the enclosing layer anymore, which in your case is the #contentBody and #layout. So those layers think that there are no content inside, and therefore will not have any height because you didn't define height for those 2 layers (height: 100% for #layout doesn't count because it means 100% of its content's height, and your content is not there when it's floated, remember?) Don't bother to add a height, just keep reading...
So when you have a clearing div like ".clr", it forces to the page to put other contents UNDER the height of the floating elements, therefore, "clearing" them. It also implies to the enclosing div like #contentBody and #layout to stretch to fit everything in there.
Now you should see your "body.gif" in the back. The image is wide enough to be noticeable, right?

[avDesign]

Not precisely what you've asked for, but a few suggestions ...

a) I don't think the code you've provided is what you've described in the statement of your problem. I don't see where you're "adding a float element to one of [your] columns." It would be easier to help on this end if we could see an actual example.

b) As you're "fairly new to css," try breaking old HTML habits as soon as possible. You're using upper and lower case for your css. Get in the habit of using lowercase. You'll find things work better that way.

c) Be careful about setting explicit widths on contained divs. You can do it -- it's done all the time -- but you have to watch what you're doing. Otherwise you might, for example, put #layout inside #wrap even though you've given #wrap a smaller width. You might consider using %'s for the contained divs so they'll automatically adjust to the size of their containing div. Just remember to leave between half and 1 percent wiggle room if you're putting more than one floated container in the same div (i.e., the combined widths should be <= 99.5% to reduce the chance of one floated div getting pushed down under the other).