Question

HTML:

<div id="wrapper">
    <div id="content">
      <div id="slider"></div>

      <div id="left"></div>

      <div id="right"></div>
    </div>
  </div>

CSS:

#wrapper
{
  background:blue;
  width:990px;
  margin:0 auto;
}

#content
{
  width:990px;
  height:auto;
}

#slider
{
  width:990px;
/* slider jquery   */
  height:auto;
}

#left
{
  float:left;
  width:490px;
}

#right
{
  float:right;
  width:490px;
}

Live demo: Tinkerbin

But in left and right div blue color is not displaying ,

If i am giving overflow:hidden to wrapper then its work fine.
Is it necessary to give overflow to parent of floating div?

why?

Answer 1

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It’s not a new CSS trick either. It’s been documented before long long ago.