Background color not showing in wrapper

Question

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

.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-->

the problem is in your `.clear` style definition. – letiagoalves Sep 05 '13 at 19:35 — letiagoalves, Sep 05 '13 at 19:35

score 3 · Answer 1 · answered Sep 05 '13 at 19:30

3

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

answered Sep 05 '13 at 19:30

letiagoalves

11,224
4
40
66

Thanks for your answer but for some reason it did not work with my full code - would you know why? Here is an updated fiddle zith the full code: http://jsfiddle.net/DzaCq/5/ – Greg Sep 05 '13 at 20:06
@Greg yes. you need to add a full wrapper to your centered `div.wrap980px` and apply a `background-color`. Here is your full code updated: [http://jsfiddle.net/DzaCq/7/](http://jsfiddle.net/DzaCq/7/). **There is no need to apply `overflow:auto`** – letiagoalves Sep 05 '13 at 21:17

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

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?

edited May 23 '17 at 12:28

Community

1
1

answered Sep 05 '13 at 19:27

j08691

204,283
31
260
272

overflow:hidden; is fine too :) – Kevin Cittadini Sep 05 '13 at 19:27
Bah, beat me to it! :) Perhaps explain more about why (i.e. the floats) – kunalbhat Sep 05 '13 at 19:28
@KevinCittadini - was in the process of writing that and updating when you posted your comment ;) – j08691 Sep 05 '13 at 19:28
@kunalbhat - I was adding the explanation when you posted your comment. – j08691 Sep 05 '13 at 19:29
Thanks for your answer j08691 but for some reason it did not work with my full code - would you know why? Here is an updated fiddle zith the full code: jsfiddle.net/DzaCq/5 – Greg Sep 05 '13 at 20:08
You have some typos in the code in that fiddle, but more importantly which div in that latest example is exhibiting the problem and needs to be stretched? – j08691 Sep 05 '13 at 20:14
Thanks. Indeed I fixed the typos and it partially fixed my issues. Updated fiddle: http://jsfiddle.net/DzaCq/6/ Remaining one: if I want bottom-left and bottom-right to be aligned horizontally to the center of the page, do I need to create an additional wrapper of ie. 980px within wrap 100pc? Thanks again for your help! – Greg Sep 05 '13 at 20:42
I just checked your latest fiddle and it looks like your bottom left and right divs are horizontally aligned/centered. What am I missing? – j08691 Sep 05 '13 at 20:46
Currently bottom left is aligned to the left side of the screen and bottom right to the right side. What I'd like is both of them (next to each other) in the middle of the page (like the first 2 intro DIVs). Possible without an additional wrapping? Tks – Greg Sep 05 '13 at 20:49
No you'll need a wrapper to center them together on the same line. If it was just one element you could use the margin:0 auto trick but that won't work if they're together. – j08691 Sep 05 '13 at 20:52
Oki doki. Thanks a lot for your help, really appreciate it! – Greg Sep 05 '13 at 21:00

score 2 · Answer 3 · answered Sep 05 '13 at 19:28

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.

score 1 · Answer 4 · answered Sep 05 '13 at 19:31

1

You need to specify a height for the .wrap100pc.

Hope that helps!

answered Sep 05 '13 at 19:31

Kai Feller

653
3
14

Background color not showing in wrapper

4 Answers4