CODEWITHSUNDEEP
htmlcss
Jamie Fearon
Jamie Fearon

Reputation: 2634

Clearing a footer for two floated divs

This is very confusing, I'm using the clearfix class from BootStrap to try and simply clear a footer but it's not working. My code is below:

<div>
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="footer clearfix">Footer</div>
</div>

.left {
    background-color: red;
    float: left;
}

.right {
    background-color: blue;
    float: right;
}

.footer {
      background-color: orange;
}

// Clear fix
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

I have fiddle here: http://jsfiddle.net/RYYFw/3/

Please could you advise why this simple clearing is not working?

Upvotes: 1

Views: 273

Answers (4)

Sean
Sean

Reputation: 6499

The cleafix in question is different to what you think it is.

In this situation, the bootstrap clearfix means that a any floated element with the clearfix class will have a proper height (by default, if a floated element is inside a non-floated element, the non-floated element will have 0 height)

(for a much better http://css-tricks.com/all-about-floats/ )

What you want is a way to clear the footer like such:

.clear { clear: both; }

The clear property means floated element are not allowed on either side of said element (it can also be assigned left and right)

Upvotes: 0

kyooriouskoala
kyooriouskoala

Reputation: 583

clearfix wouldn't work since you'd normally use it to give the parent container a height value based on the elements inside it are being floated.

What you should be using is the clear: both;

Therefore, you should apply it on your footer: 

.footer {
  background-color: orange;
  clear: both;
}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26989

Add clear:both to .footer

.footer {
      background-color: orange; clear: both;
}

DEMO

Upvotes: 0

BenM
BenM

Reputation: 53246

You need to add clear: both to your footer:

.footer {
    background-color: orange;
    clear: both;
}

Please see the updated jsFiddle.

Upvotes: 4

Related Questions