Converting tables to CSS layers

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 curr开发者_Python百科ent 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.

---

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.

---

This is a good place to start learning about css positioning. Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.

Instead of:

<div id="menu-header">
    <h1>HEADER</h1>
</div>
<div id="menu-body">
    <p>MENU BODY</p>
</div>

Try something like:

<div id="menu">
    <div id="menu-header">
        <h1>HEADER</h1>
    </div>
    <div id="menu-body">
        <p>MENU BODY</p>
    </div>
</div>

That way if you want to move the menu and everything in it you can write a CSS rule like this:

#menu {float:left;margin:15px 0 0 25px;}

---

just another one! ;-)

full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers

hope this help!

---

Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.

So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!