更改div bg颜色

Question

i created a main div and split-ted into two css code

#main { background-color:#FFFFFF; width:1000px;}
#left {  width:750px; float:left }
#right {  width:250px; float:right }

but background color does not changes , when i changed it to

#main {  width:1000px;}
#left { background-color:#FFFFFF; width:750px; float:left }
#right { background-color:#000000; width:250px; float:right }

it works but when height changes it looks boring i want to change the background color of whole main div.

Answer 1

what about if your main div gets a

#main {
    min-height:100px;
    max-height:100px;
}

it needs a height to display background-color

if its not working show the html part please

Answer 2

Without the html this is just a guess, but I think your problem is that the div#main has a height of 0. This happens because the floating divs inside are no longer part of the document flow. Try setting a height on the main div, this should fix it.

Answer 3

Add following rule

#main:after { content: " "; display: block; overflow: hidden; clear: both; height: 0; }

It will clear floats and make the container as high as the highest column inside.