Today, in an effort to learn CSS and apply it practically by creating simple themes, I decided to delve into the proper ways of clearing floats in CSS. My research led me to explore how Twitter handles this issue, so I dug into Bootstrap's CSS file and uncovered the solution I was seeking:
.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;
}
Eager to put this newfound knowledge to the test, I incorporated these code snippets into a specific part of my project like this:
<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;
}
After implementing this code, I noticed a strange bug on the page when viewed live. Upon further investigation, I suspected that the use of display: table; might be causing the issue, as removing it using Firebug seemed to fix the problem.
If you're curious, you can view the page here, where the bug manifests as the first pink box being taller than its content. Can anyone spot what I may be doing wrong here?