CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Background color not showing in wrapper

for some reason the #CCC background (100% width) doesn't show up with my code below. Would you know why? Tks

http://jsfiddle.net/DzaCq/5/

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
}

#bottom-left {
    float: left;
    width: 490px;;
    background: #5421c2;
    height: 300px;
}

#bottom-right {
    float: right;
    width: 490px;;
    background: #2ec4a6;
    height: 300px;
}

.clear:after {
    clear: both;

}


<div class="wrap100pc clear">
<div id="bottom-left">bottom-left</div>
<div id="bottom-right">bottom-right</div>
</div>  <!-- End DIV Wrap100pc Clear-->

Upvotes: 0

Views: 4932

Answers (4)

Kai Feller
Kai Feller

Reputation: 663

You need to specify a height for the .wrap100pc.

Hope that helps!

Upvotes: 1

letiagoalves
letiagoalves

Reputation: 11302

There is no need to add overflow:auto to div#wrapper. Your .clear style definition does not fix .wrapper height.

Changing it to:

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

solves your problem.

DEMO

Upvotes: 3

Jason
Jason

Reputation: 3360

You just need to add float:left to the wrapper too:

http://jsfiddle.net/DzaCq/3/

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
    float:left;
}

EDIT: If you don't want it floated, the other answer using overflow would work just as well.

Upvotes: 2

j08691
j08691

Reputation: 207900

To get the background back, add overflow:auto to your #wrapper div.

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
    overflow:auto;
}

jsFiddle example

The floated child divs have their own block formatting context and applying overflow:auto (or hidden) produces the result you seek. For an in-depth answer about block formatting context, see How does the CSS Block Formatting Context work?

Upvotes: 2

Related Questions