The Pragmatic Craftsman         :: Simplicity from complexity :: | 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

If you consider yourself a good programmer, great! But is this going to hold true, two years, five years from now? If you are not going to learn new things, I can safely say that you're going to be "out of date."

If you want to stay still, you have to continue moving: being a good programmer means learning new things constantly.

Here are 10 Ways to Learn New Things by Philosophical Geek. Follow at least some of these and I think you'll be covered.

1. Read books.
2. Read Code.
3. Write Code - Lots of it.
4. Talk to other developers.
5. Teach others.
6. Listen to podcasts
7. Read blogs
8. Learn a new language
9. Learn the anti-patterns
10. Be Humble

Reference
10 Ways to Learn New Things in Development | Philosophical Geek