2

As a part of learning CSS (& practically applying it — by creating simple themes), today I wanted to know some proper ways of clearing floats in CSS.

I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):

.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

&

.container {
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.container:before, .container:after {
    display: table;
    content: "";
}
.container:after {
    clear: both;
}

I immediately tried it out, and that specific part of my code looked like so:

<p class="sample-preview">
    <span class="sample-preview">PREVIEW</span>
    <em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
    <strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
    Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>

+

p.sample-preview {
    border: 1px solid #FFCCC9;
    background: #FFEBE9;
    outline: 2px solid #FFEBE9;
    padding: 10px;
}

span.sample-preview {
    display: inline-block;
    float: right;
    margin:0;
    font-weight: bold;
    font-size: 12px;
    background: #FFCCC9;
    padding: 2px 5px;

}

.sample-preview {
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.sample-preview:before, .sample-preview:after {
    display: table;
    content: "";
}
.sample-preview:after {
    clear: both;
}

Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed display: table; from the code using Firebug.

You can take a look at the page here and the bug is — the first pink box is taller than the content. What am I doing wrong?

Community
  • 1
  • 1
its_me
  • 10,998
  • 25
  • 82
  • 130
  • You should use EITHER float or display: table. Pick one and go with it, using both is bound to make problems., – Kyle Mar 19 '12 at 12:26
  • @KyleSevenoaks I don't understand. So, is `display: table;` unnecessary in my case? If so why? (can you please try to be a bit more clear?) – its_me Mar 19 '12 at 12:28
  • Well, it depends on what exactly you want to do. Display:table; has its place as does float. What do you want to achieve? :) – Kyle Mar 19 '12 at 12:33
  • @Kyle Sevenoaks _"You can take a look at the page [here](http://groups.boygeek.in/markdown/index.html) and the bug is — the first pink box is taller than the content."_ — That's exactly what I am trying to do. Please take a look at the page. Thanks! – its_me Mar 19 '12 at 12:35
  • I don't understand why it would need a float or display table, but the solution seems to be to remove display table from the CSS. – Kyle Mar 19 '12 at 12:38

1 Answers1

4

The issue is that you're also clearing the floated menu to the right.

There's two solutions for that:

  • the usual is to float your content area itself to the left. This means that everything inside it is in a different float context. Your clear will only affect the elements inside of it.

  • another trick that works is specifying overflow: hidden on your sample-preview paragraph. This is probably easier to do. Specifying the overflow property on an element (but not set to visible) causes it to behave like a float container.

Cfr: http://www.brunildo.org/test/clear.html, http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

I should also note that with this overflow trick, you don't need the clearfix at all.

Joeri Hendrickx
  • 16,947
  • 4
  • 41
  • 53