Step n°4

We add animation to the menu with a:hover, thus when the mouse is over a link.
  /*we change colors*/
  /*we modify the borders and spacing
  to avoid jerks*/
  /*darker right and left borders*/
#menugauche li a:hover{
background-color:#A9CFFE;
color:#FFF;
border-bottom:3px solid #E9F5FE;
border-top:4px solid #E9F5FE;
border-left:8px solid #6600CC;
border-right:8px solid #5200A4;
padding-bottom:1px;
padding-top:1px;
padding-right:0;
width:135px;
}
From now on, old browsers get lost:
  /*2 columns*/
  /*float makes things incompatible*/
  /*space between the 2 columns*/
  /*real width 44+.8+.8*/
.demi{
border:1px solid #FAAAFF;/*pb Netscape*/
float:left;
display:inline;/*ie fix*/
margin-left:.8em;
margin-right:.8em;
width:44%;
background-color:#E7F3FE;
text-align:left;
text-indent:.5em;
}
  /*we add space between text and border*/
.demi div.n{
line-height:1.2em;
padding:10px;/*same as padding:10px 10px 10px 10px;*/
}
.demi{
line-height:1.5em;/*bug Opera ie*/
}
.table_container {
width: 100%; /*99% nn6*/
border-right:1px solid #FAAAFF;
border-bottom:1px solid #FAAAFF;
overflow:hidden;/*so that the container wraps the content*/
}
.ligne_container {
width: 100%;
border-top:1px solid #FAAAFF;
overflow:hidden;
display:table; /* nn6 Opera 6*/
}
  /*3 columns*/
.donnee_container{
width:32%;
}
  /*2 columns here the wide column*/
.donnee_container2{
width:66%;
}
  /*borders,
  hide text if it overflows*/
  /*do not wrap text*/
.donnee_container,.donnee_container2{
float:left;
border-left:1px solid #FAAAFF;
white-space: nowrap;
overflow:hidden;
display:table-cell; /* nn6 Opera 6*/
}
.ligne_container p {margin:0 0 0 5px;}
After a float, clear is necessary to mark the end of the DIV which wraps some content.
.clear{
clear:both;
padding-bottom:1px;/*Netscape 6 & 7*/
}

Title for a table with 3 columns

Left

Center

Right

The text is hidden

if there is

an overflow

so that alignment

is not modified.

 

 

 

 

Title for a table with 2 columns

Wide column on the left

Narrow on the right

Centered text

Bold characters

 

 

Column on the left using half of the content part of the page with margins on both sides.
Column on the right using half of the content part of the page with margins on both sides.

The menu can also use <dl>, <dt> and <dd> (if necessary) instead of <ul> and <li>.

To last step.