Corrosive Online

CSS Box Model

Here is a quick introduction to the CSS Box Model, the cornerstone of CSS web design and positioning. If you are struggling to get your head around how to position the content in your website then listen up!

The CSS Box Model works on the principal that all of your tags or divs will line up against each other to form your layout. This is only true of relative or naturally positioned tags. Some people get over excited with the concept of being able to absolutely position the structural elements of their website. Absolute positioning is fine but you need to be aware how it reacts when a browser window is resized or it is viewed on a different size screen. I would certainly steer clear of absolute positioning for website structure. You must also understand that I am discussing how the CSS Box Model should work in a Web Standards compliant browser. Older browsers, including IE6, can play havoc with the CSS Box Model if you don't know what you are doing so always check as many browsers as you can to make sure it displays OK. I am never going to pander to IE6 so I will leave any reference to it there.

So, you really need to understand the Box Model to get the spacing and positioning right for your website. Below is a graphical representation of the CSS Box Model.

You can see that the box is made up of four elements.

1. The margin; margins are transparent and are on the outside of the box. Margins do not add to the width of your box but they do affect the other tags around it.
2. The border; the border has colour, width and style options. The style options include things like solid, grooved, inset, outset and so on. If you want an outline around your box then use borders. The width of a border does not add to the width of the box.
3. The padding; padding is transparent and is the part of the box which keeps your content off the edges of the box and, again, does not add to the width.
4. The width that you specify in your CSS styles is simply the width in which your content will sit.

I know that this is confusing but once you get it you will be fit to build a really robust website structure so stick with me.

Here is some CSS to show you how you would style a tag to make use of the Box Model;

#box {
margin: 10px;
border: 5px solid grey;
padding: 10px;
width: 100px;
}

So the width that can be filled with content (in this case I will explain with plain old HTML text) is 100 pixels. The border will be 10 pixels away from the text due to the invisible padding. The border is 5 pixels and the margin is another 10 pixels away. This means that, if you set another tag next to it, the edge of that box will be a total of 25 pixels away from the text and 10 pixels away from the box border.

Say I use the following CSS;

#box1 {
margin: 10px;
border: 5px solid grey;
padding: 10px;
width: 100px;
}
#box2 {
margin: 10px;
border: 5px solid grey;
padding: 10px;
width: 100px;
}

And the following HTML;

<div id="box1">This is the content for box one</div>
<div id="box2">This is the content for box two</div>

I will end up with two boxes on top of each other

with the spacing we have discussed.

Armed with this concept you should begin to see how a website should go together. Don't get 'divitis' and start positioning one div inside another to get everything lined up the way you want. It might display OK but the ultimate prize is clean code and as little as possible to optimise page download time.

NB: I tend to try and avoid giving any tags heights unless it is a static element of the site such as a graphic banner. The reason for this is that you want your website to 'grow', not only with content, but if the viewer decides to resize your text size styles in their browser. You don't want text and boxes to start overlapping. This is the other good reason to give absolute positioning a miss because where a corner point is fixed you add or resize text and nothing lines up any more. You are very restricted in your design and end up creating content to match your layout and not the other way round!

Advertisements If you would like to advertise on Corrosive Online then get in touch through my Contact Page for details. If you have found anything on this site useful or entertaining or you have enjoyed one of my Online Web Design Lessons then I would love you to make a donation. Use the Paypal button below to make a donation.