Franck Yu

Franck,

> I am currently looking for a sample html with a header, a left sidebar,
> the content and the footer, all div tag instead of table tag.

This is what is used on my own site with the Moosified theme (using specific
markup, but the effect is the same).

<div id="wrapper">
 <div id="header">
  <h1>foo</h1>
  <p>bar</p>
 </div>
 <div id="menu">
  <h2>navigation</h2>
  <ul>
   <li><a href="x">y</a></li>
  </ul>
 </div>
 <div id="content">
  <h2>something</h2>
  <p>something more</p>
 </div>
 <div id="footer">
  <p>Contact us by email</p>
 </div>
</div>

Now I assume you want IE support, so this has to be done with many
restrictions.

1. float the menu and give it the width you desire

#menu {
 float: left;
 width: 200px;
}

2. make sure the content remains indented, even if the menu is not as long
as the content - this makes it look like a column, not a float

#content {
 margin-left: 200px;
}

3. make sure the footer ends below everything, even if the menu float is
longer than the content

#footer {
 clear: left;
}

4. if you want to impose a specific or maximum width on the content, it is
important not to impose the width on the #content itself, or you will
trigger IE's float bugs:
http://www.howtocreate.co.uk/wrongWithIE/?chapter=Float+Model
This is why the wrapper is there - the width can be imposed on it without
causing problems for IE

#wrapper {
 width: 750px;
 max-width: 100%;
}

5. You will probably want to make sure that you don't get any ugly margin
collapses where the contents of the elements inside the DIVs spill their
margins outside the DIVs and create weird gaps. To prevent that, ensure that
each DIV has either a border or padding at its top and bottom. If you apply
padding to the menu, remember to make sure to reduce its width by that
amount so that it still fits beside the content.

#header {
 border-bottom: 1px solid #000;
 padding-top: 1px;
}
#content, #menu {
 padding-top: 1px;
 padding-bottom: 1px;
}
#footer {
 border-top: 1px solid #000;
 padding-bottom: 1px;
}

6. If you want a border between the left menu and main content, and you want
it to appear that the left menu and main content are both the full length of
the page (instead of only as tall as their contents), make sure you apply a
border to both #menu and #content, and position them exactly so that they
overlap. That way, the visible border will reach the footer, no matter which
element is longer.

#content {
 border-left: 1px solid #000;
 padding-left: 8px;
 padding-right: 8px;
}
#menu {
 border-right: 1px solid #000;
 padding-left: 8px;
 padding-right: 8px;
 width: 184px;
}

7. any outer border should be applied to the wrapper

#wrapper {
 border: 1px solid #000;
}

8. centring the whole design is done by setting left and right margin to
auto on the wrapper

#wrapper {
 margin: 0 auto;
}

I have attached a sample document that implements this.

Now if you want three columns, you can simply repeat the left menu stuff on
the right instead, make sure content has the margin on both sides, and make
sure the footer clears both, not just left.

If you want a fluid left column width, you have to choose:
1. keep IE support and allow the main content to wrap around the bottom of
the menu if it is shorter than the content
2. drop IE and use display:table (this is the "right" approach, but most
authors cannot afford to ignore IE)
http://www.howtocreate.co.uk/wrongWithIE/?chapter=Table+Styles

If you want backgrounds or background colours on the columns, and you want
the column backgrounds to extend to the footer correctly no matter which
column is taller, then the background must be applied to the wrapper instead
as a background image. This must have a separate appearence left and right,
with the separation matching the width of the menu. Alternatively drop IE
support, and use display:table which solves this problem completely.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/