1

I can't figure out this basic problem. I basically am trying to place the purple div next to the yellow div. these 2 divs are wrapped in the white div, and the white div is wrapped in the blue div.

If I float the yellow and purple divs left, the white div changes its fixed width from 960px to 100%, and the blue div cannot be seen.

How can this be fixed? I've tried clear:both but to no avail.

/* Footer */
#footer-wrap{
 width:auto;
 height:auto;
 background:#039;
}
#footer-content-wrap{
 width:960px;
 height:auto;
 background:#EDF5F7;
 margin:0 auto;
}
#footer-left{
 width:500px;
 height:200px;
 background:#CC3;
}
#footer-right{
 width:460px;
 height:200px;
 background:#96F;
}
<!-- Footer -->
<div id="footer-wrap">
<div id="footer-content-wrap">

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

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

</div>
</div>

</body>
</html>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
user3760941
  • 518
  • 5
  • 19

3 Answers3

1

When you float your footer-left and footer-right divs, the white div takes 100% width as its 960px equals the sum of the footers.

If I float the yellow and purple divs left, the white div changes its fixed width from 960px to 100%, and the blue div cannot be seen.

The blue div is cannot be seen because you are not clearing the floats - clear it with overflow: hidden on the footer-content-wrap.

See demo below:

/* Footer */

#footer-wrap {
  width: auto;
  height: auto;
  background: #039;
}
#footer-content-wrap {
  width: 960px;
  height: auto;
  background: #EDF5F7;
  margin: 0 auto;
  overflow: hidden;
}
#footer-left {
  float: left;
  width: 500px;
  height: 200px;
  background: #CC3;
}
#footer-right {
  float: left;
  width: 460px;
  height: 200px;
  background: #96F;
}
<div id="footer-wrap">
  <div id="footer-content-wrap">
    <div id="footer-left"></div>
    <div id="footer-right"></div>
  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
1

You just need to add the overflow: auto; to both containers and then float your elements, the issue is that when you float the objects the containers will loose the height, you can read more here: why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t. Here is a fiddle with your code and the overflow's fixed, I added an extra padding to the containers so you can check the results, if you remove the padding's it will still look like they dissapeared, I also made the white div to red to be more obvious the results.

Community
  • 1
  • 1
daniel.brubeck
  • 644
  • 4
  • 10
0

You can add a float:left property to your divs.

See this pen.

CSS :

#footer-wrap {
    width: auto;
    height: auto;
    background: #039;
}
#footer-content-wrap {
    width: 960px;
    height: auto;
    background: #EDF5F7;
    margin: 0 auto;
}
#footer-left {
    width: 500px;
    height: 200px;
    background: #CC3;
    float: left;
}
#footer-right {
    width: 460px;
    height: 200px;
    background: #96F;
    float: left;
}

HTML :

<div id="footer-wrap">
  <div id="footer-content-wrap">    
    <div id="footer-left"></div>    
    <div id="footer-right"></div>    
  </div>
</div>
lddz
  • 282
  • 1
  • 6