CODEWITHSUNDEEP
htmlcss
Artem Z
Artem Z

Reputation: 565

Why the footer doesn't appear at the bottom?

Below you can see my code. It seems that the footer is "stuck" at the bottom of h2_c div not at the bottom of .content div as it should. Why that? I tried to use positioning but it doesn't work.

Thak You.

.header {
  background: #a7a7a7;
  min-height: 700px;
  position: relative;
}
.content {
  width: 940px;
  margin: 70px auto 0 auto;
}
.h2_c {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.one {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.info {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.two {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  margin-left: 20px;
  position: relative;
}
.three {
  float: right;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.h2 {
  color: #fff;
  font-size: 28px;
  padding: 20px 20px 10px 20px;
  margin: 0;
}
.p {
  color: #ccc;
  margin: 0;
  padding: 0px 20px 10px 20px;
  font-size: 16px;
}
.span {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  background: blue;
  margin: 20px;
}
.footer {
  border-top: 4px solid orange;
}
<div class="header"></div>
<div class="content">
  <h2 class="h2_c">Content</h2>
  <div class="one">
    <div class="info">
      <span class="span">Text 1</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="two">
    <div class="info">
      <span class="span">Text 2</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="three">
    <div class="info">
      <span class="span">Text 3</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
</div>
<div class="footer"></div>

Upvotes: 0

Views: 485

Answers (2)

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

Because when you float an element you get it out of the normal html flow. If you insert a line like:

<div style="clear:both"></div>

Right below your 3 floating div's it will work as you expect.

You can do the same using :after pseudoelement with clear: bothproperty but I'm just a fan of the first choice (for a bit more cross "old" browsers compatibility).

Adding overflow:hidden works also but I don't like that aproach as... what if you don't want to hide the overflow?

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

Your floated "really cool text" sections are escaping the .content section, since (by default) floats aren't considered when computing the container's height.

Add overflow: auto to .content to create a new block formatting context and fix this.

.header {
  background: #a7a7a7;
  min-height: 700px;
  position: relative;
}
.content {
  width: 940px;
  margin: 70px auto 0 auto;
  overflow: auto;
}
.h2_c {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.one {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.info {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.two {
  float: left;
  width: 300px;
  height: 400px;
  background: green;
  margin-left: 20px;
  position: relative;
}
.three {
  float: right;
  width: 300px;
  height: 400px;
  background: green;
  position: relative;
}
.h2 {
  color: #fff;
  font-size: 28px;
  padding: 20px 20px 10px 20px;
  margin: 0;
}
.p {
  color: #ccc;
  margin: 0;
  padding: 0px 20px 10px 20px;
  font-size: 16px;
}
.span {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  background: blue;
  margin: 20px;
}
.footer {
  border-top: 4px solid orange;
}
<div class="header"></div>
<div class="content">
  <h2 class="h2_c">Content</h2>
  <div class="one">
    <div class="info">
      <span class="span">Text 1</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="two">
    <div class="info">
      <span class="span">Text 2</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
  <div class="three">
    <div class="info">
      <span class="span">Text 3</span>
      <h2 class="h2">Some really cool text</h2>
      <p class="p">Text text text text text text text text text text text text text text text text text text.</p>
    </div>
  </div>
</div>
<div class="footer"></div>

Upvotes: 2

Related Questions