Converting tables to CSS layers

Question

I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.

• Current site in tables: http://daweb.nl/
• Current attempt in div: http://daweb.nl/daweb/

I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.

Answer 1

http://jsfiddle.net/qJBpk/10/

Check the preview here.

This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.

Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.

The three columns have the float property set to left, so that each one is placed next to the other.

The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.

Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.

EDIT

To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.