Welcome to this new episode of the Web Design Bureau of Mauritius CSS theme building. Today, we’ll dive directly into the code and start coding the structure. If you want to refresh your ideas on this structure just drop on to the previous structure article where we detailed it. At the end of the last post we had a full HTML structure with divisions. Now, we’ll work with the main css file only to get each division to step in its place. So, fire up your text editor and open the style.css file.
Margins and paddings.
Margins and paddings are inherent to certain types of blocks and can be added to practically any tag in HTML. One thing that I like to do when beginning a project is to get all the margins and paddings out of the way so that I can control every element, especially when using the box model which is the basis of all actual CSS web design (new elements in CSS3 will make use of different, and hopefully easier, solutions but that’s not for tomorrow). First thing to do then is to clear all margins by using the asterisk wildcard.
* {
margin: 0;
padding: 0;
}
Centring the document.
Remember that our main document was called #document. We’ll need to centre it horizontally. This is one of the problems designers didn’t know how to work around especially in IE browsers and which lead to the use of embedded tables. The solution is fairly simple.
#document {
margin: 0 auto;
}
There are different ways of specifying margins (and paddings, which follow the same concepts) in CSS. The margins are specified following a clockwise pattern starting from the top.
#document {
margin: 10px 20px 10px 20px;
}
This would be the equivalent of writing:
#document {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
What catches the eye is that the first version is shorter and will thus consume less bandwidth on page load. Now let’s say that we needed 10px margins all around we would just have written:
#document {
margin: 10px;
}
Looking back at our document with 4 margins with 2 of 10px and 2 of 20px we notice that there are common denominators. The 10px are for top and bottom and the 20px for left and right. This can also be short-handed to 2 elements:
#document {
margin: 10px 20px;
}
The browser will read 10px top and bottom and 20px left and right.
Other declarations of margins can be done in percentage (%) or automatically (auto) where the browser will calculate the margin automatically from the borders of the height or width available. This is what is used to centre the document in the browser.
#document {
margin: 0 auto;
}
Margin 0 (notice that we don’t use 0px because 0 of something is nothing) specifies that we do not have any margin top or bottom and auto for left and right will force any browser (understanding this code) to centre the document depending on the browser’s viewport width. Actually, looking at my design, I need a 20px margin top and bottom of my page so I’ll modify the code for it.
#document {
margin: 20px auto;
}
Width
The site, as specified in the structure article, needs to be 960px wide to be fully viewable in a standard 1024px screen. This is done by adding the width to the #document as it is the utmost element holding the page.
#document {
margin: 20px auto;
width: 960px;
}
This keeps all the elements in the page at 960px wide and centred.
Overflow.
The CSS overflow property specifies what to do with an element when its content doesn’t fit exactly. This is useful especially for height management. You might have noticed that no height has been specified in our #document. This has been done because I want it to automatically increase its height whenever content is added to any element inside it. The ‘hidden’ property allows us to specify that no scrolling effect in the division is needed, hence, the division should always adjust itself according to the height imposed by any content present. For example, if #sidebarLeft gets longer than any other element #body should increase its height, pushing down #footer and increasing #document's height. All this works with the overflow.
#document {
margin: 20px auto;
width: 960px;
overflow: hidden;
}
Inner divisions.
Back on the structure we have 3 major divisions inside the document. These divisions offer the “content” framework. They are the #header, the #body and the #footer. These elements are simple to understand. They are all 960px wide and will also be modifying their height according their inner contents too. This will be simple to code then. Here we will be using some CSS shorthand. Instead of declaring thrice each element and stating their height and overflow, we will declare all this in one go. You can use commas to line up selectors in CSS. This way:
#header, #body, #footer {
width: 960px;
overflow: hidden;
}
All these elements have the same properties now.
Content and sidebars.
Finally we get to the last divisions in our structure code. The final elements are the #content and #sidebars (left and right). The idea in the structure is to distribute all of them in specific widths at specific positions. Specifying the widths is fairly easy. These will also have overflows hidden as explained earlier.
#content {
width: 450px;
overflow: hidden;
}
#sidebarLeft {
width: 300px;
overflow: hidden;
}
#sidebarRight {
width: 170px;
overflow: hidden;
}
Floating.
CSS float property allows you to specify where an element has to be positioned (left or right or not at all). Here we will be using the left and right floats.
Looking at our structure it is obvious that the #content box will be positioned on the left. It will thus take a float to the left. Its width being given all the other elements will follow to fill the space left. Don’t fret if things look broken.
#content {
width: 450px;
overflow: hidden;
float: left;
}
The other sidebars would also look great if they were left floated. However, our visual structure shows that there should be a 20px gutter between the boxes. There are 2 ways of doing this.
First solution, all floats to the left.
#content {
width: 450px;
overflow: hidden;
float: left;
}
#sidebarLeft {
width: 300px;
overflow: hidden;
float: left;
margin-left: 20px;
}
#sidebarRight {
width: 170px;
overflow: hidden;
float: left;
margin-left: 20px;
}
The 2 sidebars take a left margin of 20px each providing for the gutter. If we add all our widths and margins we get this. 450+300+170+20+20 = 960px, being the document width. This is how it works.
The second solution uses a right float just because I didn’t want to add a margin (lazy b*st*rd)! Instead of calculating the 20px margin and adding it I just forced the last box to float to the right. It gives the same result.
#content {
width: 450px;
overflow: hidden;
float: left;
}
#sidebarLeft {
width: 300px;
overflow: hidden;
float: left;
margin-left: 20px;
}
#sidebarRight {
width: 170px;
overflow: hidden;
float: right;
}
Conclusion
As a means of conclusion to this part of the tutorial we now have selectors set for the whole layout. As you can see, we have not touched at our HTML code while doing this and the whole page has its layout straight and robust. Along with that the page renders the same in IE6 and Firefox 2/3. I haven’t tested it on IE7 yet. I have linked to the W3C pages dealing with some of the selectors and concepts used in this post. It is always interesting to have a look at those and learn from them.
You can download the source files here.
