CODEWITHSUNDEEP
htmlcssword-wrap
user3760941
user3760941

Reputation: 528

div wraps not stretching down

I cannot get this red div wrap to stretch down past the other divs. I've tried using the clear:both; attribute, and a few other combinations, but to no avail. Can anyone tell me what I'm doing wrong? Thanks

#footer-wrap{
	width:100%;
	height:auto;
	margin: 0 auto;
	background:#dc0000;
}
#footer{
	width:960px;
	height:auto;
	margin: 0 auto;
	background:#dc0000;
	padding: 30px 0 30px 0;
}
.footer-class{
	width:126px;
	height:200px;
	float:left;
	background:#093;
	margin:0 30px 0 0;
}
.footer-class-end{
	width:180px;
	float:right;
	background:#FF0;
}
<div id="footer-wrap">
<div id="footer">
<div class="footer-class"><h5>products</h5></div>
<div class="footer-class"><h5>support</h5></div>
<div class="footer-class"><h5>information</h5></div>
<div class="footer-class"><h5>legal</h5></div>
<div class="footer-class"><h5>interactive</h5></div>
<div class="footer-class-end"><h5>twitter</h5></div>

</div></div>

Upvotes: 1

Views: 50

Answers (3)

emmanuel
emmanuel

Reputation: 9615

You have to clear left float with clear: left.

#footer-wrap {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #dc0000;
}
#footer {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background: #dc0000;
  padding: 30px 0 30px 0;
}
.footer-class {
  width: 126px;
  height: 200px;
  float: left;
  background: #093;
  margin: 0 30px 0 0;
}
.footer-class-end {
  width: 180px;
  float: right;
  background: #FF0;
}
.clear {
  clear: left;
}
<div id="footer-wrap">
  <div id="footer">
    <div class="footer-class">
      <h5>products</h5>
    </div>
    <div class="footer-class">
      <h5>support</h5>
    </div>
    <div class="footer-class">
      <h5>information</h5>
    </div>
    <div class="footer-class">
      <h5>legal</h5>
    </div>
    <div class="footer-class">
      <h5>interactive</h5>
    </div>
    <div class="footer-class-end">
      <h5>twitter</h5>
    </div>
    <div class="clear"></div>
  </div>
</div>

Reference: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?

A new way clearing floats without extra markup is by putting clear at :after pseudo-element (but has less browser compatibility).

#footer:after {
  content: "";
  clear: both;
  display: block;
}


#footer-wrap {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #dc0000;
}
#footer {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background: #dc0000;
  padding: 30px 0 30px 0;
}
#footer:after {
  content: "";
  clear: both;
  display: block;
}
.footer-class {
  width: 126px;
  height: 200px;
  float: left;
  background: #093;
  margin: 0 30px 0 0;
}
.footer-class-end {
  width: 180px;
  float: right;
  background: #FF0;
}
<div id="footer-wrap">
  <div id="footer">
    <div class="footer-class">
      <h5>products</h5>
    </div>
    <div class="footer-class">
      <h5>support</h5>
    </div>
    <div class="footer-class">
      <h5>information</h5>
    </div>
    <div class="footer-class">
      <h5>legal</h5>
    </div>
    <div class="footer-class">
      <h5>interactive</h5>
    </div>
    <div class="footer-class-end">
      <h5>twitter</h5>
    </div>
  </div>
</div>

Reference: MDN - Clear

Upvotes: 2

Vitaliy Kirenkov
Vitaliy Kirenkov

Reputation: 1

You didn't add clearfix, thats why it doesn't work.

http://jsfiddle.net/5a8vmr4r/3/

Upvotes: 0

sinisake
sinisake

Reputation: 11328

Or add just overflow:hidden to wrapper. http://jsfiddle.net/5a8vmr4r/1/

This is well known issue with floated elements...

Upvotes: 0

Related Questions