This post is all about the CSS Box Model and what you need to keep in mind when you’re doing anything with CSS that involves borders, width and height, padding, and margins. Have a look at the W3C schools page on the Box Model to see a nifty diagram of the whole thing.
What’s What:
- Borders: Borders are pretty easy conceptually – they’re just a border around an HTML object. A good example would be having a border around table cells. A border declaration looks like this:
element {
border:1px solid #000000;
} - Width and Height: Width and Height are again pretty easy to describe – it’s how wide or high the element in question is. This can be an absolute (e.g. 10px) or relative (e.g. 50%). A width appears thus:
element {
width:100%;
height:70px;
} - Padding: Padding is a little more complicated. In an HTML element, you have the content of that element (usually text), you have a border where the element stops (usually invisible, but it’s there none-the-less), and you have a space between the content and the border. The Padding is the space in between. Protip: use absolute values. It looks like this:
element {
padding:5px;
} - Margins: Margins behave like padding; except margins are the space between different elements. Protip: use absolute values. They look like this:
element {
margin:10px;
}
What’s the Problem:
If all was fine and dandy with CSS boxes then I’d not really need to write this. Anything CSS box like (that’s pretty much any block level element) behaves differently in different browsers. This as you can well imagine is a pretty big ball ache. There are also some outright weird behaviours that are counter-intuitive that you will need to know about, and again these effect different browsers differently.
Different Browsers:
The main issue, and the one any designer will encounter most often, is the difference between Trident Engined Browsers and other browsers that are more standards compliant.
The key to this particular problem is how the Width and Height properties are dealt with. In CSS compliant browsers, the total size of the box is Width + Border + Padding. In Trident, the total size of the box is just the Width declared. Now, if you don’t have any borders or padding this is fine; but things start falling apart very quickly if you do.
There are 3 main ways that you can mitigate this issue:
- You can can work with this problem, rather than against it – Create a page that will work in both compliant and non-compliant browsers, but will look a little different in the two types. To do this you’ll just have to keep in mind not to rely entirely on sizes being the same for your positioning. Using float:left; and float:right; will be very useful if you take this route.
- You can force Trident to be standards compliant – but you need to be very precise in how you do so. Read my article on CSS Quirks Mode and Standards Mode for how in detail, but it’s all related to the doctype declaration.
- You can use a box-model hack. There are a couple of different ones about,
I’d advise against using a box model hack – IE5.0 and IE5.5 have a minuscule proportion of the browser market, and IE6 can be forced into standards mode very easily by having the correct doctype.
Personally I’ve found that too many people take far too much time bodging together something that look exactly the same in Trident and others, which can compromise the design’s ease of use for a design client. My best advice is accept that things will look slightly different in different browsers.
Odd Behaviour:
As consise the CSS standards are, some bits are a bit difficult. Linking in a little with the point made above on different browsers, CSS can display some pretty odd behaviour at times that you wouldn’t think possible or doesn’t make sense.
When you have an element that’s positioned staticly or relatively, under most circumstances its width will be defined by its parent element. Set the width to 100% and it will remain unchanged. However, when you add padding and borders to a defined width, things start going awry. Any padding and border will add to the width of the element if it’s declared, not compact it inwards. Bizarrely though, if you don’t define a width it will behave how you’d expect – the padding will push the box contents inwards.
A good example can be seen at CSS Tricks on this particular subject.
There are a couple of ways you can work around this. Firstly you can set all of your widths absolutely (in px usually), and you can use extra <div> tags. Setting widths in pixels is pretty easy, so I won’t go into detail there; but I will explain what I mean by extra <div> tags.
Both Trident and others all render margins correctly, and margins are naturally ‘outside’ a box if you visualise it; so they can be a bit easier to work conceptually and also behave predictably. The code is pretty simple:
HTML:
<div id="wrapper">
<div id="container">
Content goes here
</div>
</div>
CSS:
#wrapper {width:100%;}
#container {margin:5px;width:100%;}
In Summary
Always keep an eye on what your CSS boxes are up to, because if you’re not familiar with them their behaviour will be quite unpredictable.
