CODEWITHSUNDEEP
htmlcss
user2218109
user2218109

Reputation:

clearfix technique adds some extra padding

DEMO

Using clearfix technique is awesome useful but anyone has indicated the problem of using this method is increased extra padding value as shown in demo.

The height of both are equal.

CSS: 

body{margin: 0; padding: 0;}
#wrap{width: 900px; height: 250px; background: red; margin: 0 auto;}
.clearfix:before, .clearfix:after{content: "."; display: table;}
.clearfix:after{clear: both;}
.clearfix{zoom: 1;}
#box{float: left; width: 200px; height: 250px; background: blue;}

HTML: 

<div id="wrap" class="clearfix">
<div id="box"><h1>some heading text here</h1></div>
</div>

Upvotes: 7

Views: 2350

Answers (2)

derek_duncan
derek_duncan

Reputation: 1377

Just a Jakub said. .clearfix:before, .clearfix:after{content: "."; display: table;} is adding a period before and after your element. Rather, use this code:

.clearfix:before, .clearfix:after{content: " "; display: table;}

Or, another method is to only use this code: 

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

Upvotes: 3

Jakub
Jakub

Reputation: 20475

You issue is simply this:

.clearfix:before

If you add that it will stick a . in front just like you are setting in your CSS a . Remove it and it works fine with clearfix:after

Upvotes: 1

Related Questions