The Pragmatic Craftsman :: Simplicity from complexity :: | Home | About Me |

I'm reading an excellent book on CSS - Stylin' with CSS (highly recommended). I finished reading roughly half of it and I'd like to summarize some of the things I learned.

CSS Layouts
I am used to creating page layouts with HTML tables. It's easy to do and you can get any layout you want. But doing it that way is no longer recommended, and it's an ugly way of doing layouts. The "new" way of doing layouts is with pure CSS. It's cleaner and more concise. However, it's more complicated for a novice html guy like me. To really get this, you need to have some experience.

So how do you do it? Let's look an an actual example first.

<div id="main_wrapper">
<div id="header">
    <div id="header_inner">Header</div>
</div>
<div id="nav">
    <div id="nav_inner">Left nav</div>
</div>
<div id="content">
    <div id="content_inner">Main content...</div>
</div>
</div>

and here's the style for it:

<style>
#main_wrapper {
    width: 840px;
}
#header {
    
}
#nav {
    width: 20%;
    float: left;
}
#content {
    width: 80%;
    float: left;
}
#footer {
    clear: both;
}
</style>

Nice and simple. With this technique you can put together any layout you want.

Why the inner divs? Because CSS is weird. Even though you have a div with a certain size, by adding padding, margins, and border, the width actually changes! So, sure,you can go with just a top-level div, but you have to keep in mind that the size will change when you add those settings. How do you get around that? By using an inner div. The outer div controls the sizing and floating. Inside the inner div, you can then add padding, margins and border and the size of the outer div will not change: this is really how it should work. By using an inner div, you actually simplify your life!

Reference
Stylin' with CSS: A Designer's Guide, Charles Wyke-Smith