CODEWITHSUNDEEP
javascripthtmlcss
Joe
Joe

Reputation: 145

background color disappears when overflow is visible

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.

Upvotes: 2

Views: 3381

Answers (4)

Mike Vranckx
Mike Vranckx

Reputation: 5577

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; }

Upvotes: 2

Danield
Danield

Reputation: 125433

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

Upvotes: 5

ER144
ER144

Reputation: 690

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/

Upvotes: 0

codingrose
codingrose

Reputation: 15699

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.

Upvotes: 0

Related Questions