[SOLVED] DIV Background Not stretching, with floating objects inside of it.

[monkeytooth]

Ok, I have a DIV i am using as a wrap.. inside i have a header, content area, and footer. Inside the content area I am attempting to put several smaller divs to layout a form. Its a 2 column setup within this content area.

 

|        Header        |

------------------------

|[  #1    ][    #2    ]|

|[  #1    ][    #2    ]|

|[  #1    ][    #2    ]|

|[  #1    ][    #2    ]|

|[  #1    ][    #2    ]|

------------------------

|        Footer          |

 

Now I have everything working and placed fine, per say, minus the fact that the container holding the 2 column setup is not stretching with the rows of columns. I am assuming cause they are floating. When I remove "Float:left;" from the #2 side the background stretches but #2 drops below #1 stacking them.

 

The CSS i am using to form the container is below, bcon550R and bcon550L are the 2 in question. bcon550C and bcon550Ca are the containers for R and L.

 

Can anyone help me figure out what I am doing wrong? Only other thing I can think of to point out is in IE 8 the concept works perfectly but only in compatibility mode.

 

Also if anyone has any suggestions as to how I can clean up my CSS if I am being excessive with it, by all means let me know..

 

.bcon550H{height:41px;width:100%;margin:0;padding:0;background:#FFF;background-image:url(../img/sys/bc_02.png);background-repeat:repeat-x;}
.bcon550Ha{height:27px;width:292px;margin:0;padding:14px 0 0 15px;background-image:url(../img/sys/bc_01.png);background-repeat:no-repeat;float:left;text-align:left;font-family:Verdana;font-size:12pt;color:#000;font-weight:bold;}
.bcon550Hb{height:36px;width:222px;margin:0;padding:5px 0 0 0;float:left;text-align:right;font-family:Verdana;font-size:8pt;color:#000;font-weight:bold;}
.bcon550Hc{height:41px;width:21px;margin:0;padding:0;background-image:url(../img/sys/bc_04.png);background-repeat:no-repeat;float:left;}
.bcon550C{width:100%;margin:0;padding:0;background-image:url(../img/sys/b550.png);background-repeat:repeat-y;}
.bcon550Ca{width:540px;margin:0;padding:0 5px;text-align:center;font-family:Verdana;font-size:10pt;color:#000;font-weight:bold;}
.bcon550F{height:28px;width:100%;margin:0;padding:0;background-image:url(../img/sys/bc_11.png);background-repeat:repeat;clear:both;}
.bcon550Fa{height:28px;width:20px;margin:0;padding:0;background-image:url(../img/sys/bc_10.png);background-repeat:no-repeat;float:left;text-align:left;font-family:Verdana;font-size:10pt;color:#000;font-weight:bold;}
.bcon550Fb{height:28px;width:510px;margin:0;padding:0;float:left;text-align:right;font-family:Verdana;font-size:8pt;color:#000;font-weight:bold;}
.bcon550Fc{height:28px;width:20px;margin:0;padding:0;background-image:url(../img/sys/bc_13.png);background-repeat:no-repeat;float:left;}
.bcon550L{width:270px;margin:0;padding:2px 0;font-family:Verdana;font-size:10pt;color:#000;font-weight:bold;text-align:left;float:left;}
.bcon550R{width:270px;margin:0;padding:2px 0;font-family:Verdana;font-size:10pt;color:#000;font-weight:bold;text-align:left;float:left;}

 

and the DIV layout.

<div class="bcon550H"><div class="bcon550Ha">Contact Form</div><div class="bcon550Hb"></div><div class="bcon550Hc"></div></div>
<div class="bcon550C"><div class="bcon550Ca">
<div class="bcon550L">Your Name:</div><div class="bcon550R">[form element]</div>
<div class="bcon550L">Your Email:</div><div class="bcon550R">[form element]</div>
<div class="bcon550L">Your Name:</div><div class="bcon550R">[form element]</div>
<div class="bcon550L">Your Name:</div><div class="bcon550R">[form element]</div>
</div></div>
<div class="bcon550F"><div class="bcon550Fa"></div><div class="bcon550Fb"></div><div class="bcon550Fc"></div></div>

[haku]

Add this to the element containing all the floated elements:

 

overflow:auto;

[TheFilmGod]

background-color, background-image, and background-repeat can all be combined in shorthand css.

[monkeytooth]

The overflow thing seems to have worked, thank you