CSS Layout Version of W3Schools.com

Its been my practice every time I stumble on a website to check if the design especially the layout is in CSS. One morning around 1am I was looking for some tutorials when I landed at W3Schools. Although CSS controls much of the presentation, it still uses tables for laying out their columns. Not concerned what time it was I decided to strip those table tags and overhaul it with CSS. Here’s the W3Schools CSS Version in case you’re eager to check out the final result.

First I worked on the HTML markup then determining the source order of of the elements. The source order will help you to decide on what floating techniques to use. The source order will be: header, content, left nav, right nav and the footer. They say that having the content near the top of the source will help improve search engines to crawl your site. With this kind of order I will have to use floats and negative margins in order to line up the columns.

I start by resetting the the margin and padding:

* {
margin:0;
padding:0;
}

Common styles:

body {
font:70% "Verdana", "Tahoma", "Arial", sans-serif;
color:#000;
background:#F1F1F1 url(images/bodyback.gif) repeat-x top;
}

h1 {font-size:160%;}
h2 {font-size:120%;}
h3 {font-size:110%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}

Header:

#masthead {
height:97px;
background-color:#F1F1F1;
color:#000;
width:400px;
}

#masthead h1 {
background:url(images/w3logo.jpg) no-repeat;
width:420px;
height:90px;
}

#masthead span {
display:none;
}

Container wrapper:

#wrapper {
width:790px;
}

Layout styles for the three main elements (content and the two side columns)

#content {
width:500px;
float:left;
display:inline; /* for IE */
margin-left:145px;
}

#mainNav {
width:145px;
float:left;
margin-left:-500px;
position:relative;
left:-140px;
}

#sideBar {
width:145px;
float:left;
margin-right:-145px; /* for IE */
}

These last 3 rules are the key in this type of CSS layout. By using negative margins we can put the content at the beginning of the source. You can view the final result here.