background color disappears when overflow is visible

Question

I have the following CSS code written;

#container {
    width: 1300px;
    background-color:green;
    margin:0 auto;
    overflow:hidden;
}

#menu {
    float:left;
    width:20%;
    background-color: yellow;
}

After searching google for a long time I couldn't find an explaination why the container background color is disappearing when the container overflow attribute is visible.

Can someone help me understand why ?

Update:

Thanks alot for your answers.... :)

I don't mind using overflow:hidden, ijust want to understand its purpose and how to use it.

As i unserstand, the overflow property specifies what happens if content overflows an element's box, so i dont understand why would its visibilty make the container background color disappear or why would it change the container height.

1

show html markup too... – NoobEditor Jan 06 '14 at 12:38

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

Since the elements within the container are have float:left - the container had a height of 0 - which is also what is causing you not to see any background.

In order to fix this there are a few solutions out there:

One of them is called clearfix

<div id="container" class="clearfix">
  <!-- floated elements here -->
</div>

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Another is by setting overflow:hidden on the container element - this establishes a new block formatting context - which in effect clears the floats. (See this post)

From the spec:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

Thanks Danield... Just to make sure i understand .... By setting overflow:hidden on the container element, i'm making the container "see" the floted boxes as non floated elements? — Joe, Jan 06 '14 at 18:26
@Joe Read this post [How does the CSS Block Formatting Context work?](http://stackoverflow.com/q/6196725/703717) - it should clear things up — Danield, Jan 07 '14 at 07:29

Mike Vranckx · Answer 2 · 2017-03-13T08:40:58.630

This is because of the floating child element. If your container only contains floated elements, its height will be equal to zero.

You need to include a clear element, different possibilities exists:

The Empty Div Method: By adding a <div style="clear: both;"></div> as latest child element.
The Overflow Method: By setting an overflow: hidden on the container element
The Easy Clearing Method: By adding extra CSS and a class on the parent element (clearfix')

.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

score 0 · Answer 3 · answered Jan 06 '14 at 12:45

0

It is happening because you have not given any height to #menu.

As, #container has height of #menu, background is not visible.

Give some height to it.

#menu {
    float:left;
    width:20%;
    background-color: yellow;
    height:50px;
}

DEMO here.

answered Jan 06 '14 at 12:45

codingrose

15,563
11
39
58

I tried it... I wrote your code and deleted the "overflow:hidden" attribute from the container... but unfortunately it didn't work. – Joe Jan 06 '14 at 13:26

score 0 · Answer 4 · answered Jan 06 '14 at 12:59

0

You can set the height of the container div to be equal with the height of the menu. This way you don't need the overflow: hidden setting.

$("#container").height($("#menu").height());

Demo here: http://jsfiddle.net/er144/ZV6pb/

answered Jan 06 '14 at 12:59

ER144

690
4
10

background color disappears when overflow is visible

Update:

4 Answers4