CODEWITHSUNDEEP
htmlcsscss-float
user3760941
user3760941

Reputation: 528

fixed div width changes to 100% unexpectedly

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>

Upvotes: 1

Views: 125

Answers (3)

daniel.brubeck
daniel.brubeck

Reputation: 654

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.

Upvotes: 1

kukkuz
kukkuz

Reputation: 42370

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>

Upvotes: 1

lddz
lddz

Reputation: 302

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>

Upvotes: 0

Related Questions