Simple website design using CSS 2.1

Today I’d like to address a very simple question: how to rapidly design a website?

The underlying topic we will actually cover concerns the basis of box positioning and floating using CSS 2.1. For those of you who hear a lot about CSS 3, all I can say is that it gives a lot of power to web designers with regards to a website UI and look & feel, but that the CSS 2 box model still rules. It’s important to understand it well.

Again first things first. We need to start with a bit of thinking to actually determine what our website will look like and how it’ll be organized. What I propose that we build together is quite simple: a header, a vertical navigation bar, a main section for the content and a footer at the bottom. In order to structure the website, we’ll use the div element as a generic container for our different sections. divs can be nested, thus once our basic website flow is drafted it’s easy to add as many other boxes as we want (i.e. widgets, content, …) inside our main containers.