div overflow solution

Using :after

This css2 property allows us to add extra content at the end of the element via css. we do not hav to alter markup in html such as adding

<div class”clear”></div> or <br clear=”all”/>

just a simple step: add the following code to the element class.
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

here clearfix:after adds a content at the end of the element
with clearboth and height 0 and is hidden.

but it treats ie7 differently so the code added will be
<!–[if IE]>
<style type=”text/css”>
.clearfix {
zoom: 1;
/* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don’t ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]–>

so the original code looks like:
<style type=”text/css”>
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;} /* for IE/Mac */
</style><!– main stylesheet ends, CC with new stylesheet below… –>
<!–[if IE]>
<style type=”text/css”>
.clearfix {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don’t ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]–>

Advertisements