CODEWITHSUNDEEP
csshtmlcss-floatbackground-color
Mohammad Saberi
Mohammad Saberi

Reputation: 13166

Background-color with floating elements

I have a problem while I want put 2 vertical DIV inside a main DIV. The background-color value does not work for the main DIV. I think I have to see some sections with red background color.
Please take a look at its jsFiddle and help me to solve it.

Upvotes: 0

Views: 109

Answers (2)

Fabien Papet
Fabien Papet

Reputation: 2319

Try with adding a empty div with clear:both CSS attribute or set a height to your main div.

<div id="content">
    <div id="float-left">Some Text floating left</div>
    <div id="float-right">Some Text floating right</div>
    <div id="clear"></div>
</div>

CSS Code 

#content {
    background-color:red; /* The background you want */
    width:500px; /* Demo: not important */
}

#float-right {
    float:right;
    width:300px;
    padding-right:20px;
    line-height:200%;
    background-color:#f2f2f2
}

#float-left {
    float:left;
    width:50px;
    background-color:#e1e1e1
}

#clear{
   clear:both
}

See Demo

Upvotes: 2

KwanMan
KwanMan

Reputation: 76

It's because your parent DIV has no height. You set the child DIVs to float so it won't affect the size of the parent DIV. You will need to manually set a height for the parent DIV or use the clear:both; attribute

Upvotes: 0

Related Questions