Optimal Clear CSS

10th January 2014

When developing a new site, I like to keep the CSS small and avoid using huge un-style sheets. Instead I insert a small bit of CSS at the top of the stylesheet that makes CSS behave an a more managable manner. The CSS does not just unstyle some things in IE but it changes the most commonly used tags used for structure, the 'div' tags default behavour.

html {
overflow-y: auto; /* Always show a vertical scroller - prevents content moving with variable heights */
}

body {
font-size: 12px; /* Standardise pixel sizes, could make this 100% or em/pt if wanted */
}

/* Remove the need for clear fixes */
div:after {
clear: both;
content: ".";
display: block;
height: 0px;
line-height: 0px;
visibility: hidden;
overflow: hidden;
}

div {
position: relative; /* makes position useful and more predictable */
zoom: 1; /* Fix most IE position-related bugs */
}

p, h1, h2, h3, h4, h5, h6 { /* Use padding instead of margin to keep block elements inside their parents */
margin: 0px;
padding: 10px 0px;
line-height: 1.4em;
}

a {
cursor: pointer; /* Ensure links feel clickable */ }

a img {
border: 0px none; /* remove borders around images in hyperlinks for IE */
}

You probably should remove the comments if you are using this yourself, they are rather verbose for the purposes of this post. You can then add more styling like remove body margin, change the font used throughout and make things look more presentable:

body {
font-family: Arial;
margin: 0px;
}

You can also take advantage of percentage heights by defining the height in the html and body tags. A possible use for this would be to have a sticky footer, like on this website. Note: you should then use min-height: 100% on the website wrapper div tag if you have used one (recommended).

html, body {
height: 100%;
}

body {
position: relative;
display: block;
}

Make a comment

Contribute to this article and have your say.