Après 2 bonnes heures de lectures
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home Relative</title>
<style type="text/css">
html, body {
background:#FFFFFF;
font-family:verdana;
font-size:12px;
}
#logo {
color:#00CCFF;
}
#header {
background-color:#FF0000;
}
#wrap{
background-color:#FF00FF;
}
#sidebar1 {
background-color:#00FF00;
}
#sidebar2 {
background-color:#000FF0;
}
#mainContent {
background-color:#EEEEEE;
}
/* --- Positions --- */
html, body {
margin:0;
padding:0;
}
#page{
width:1000px;
margin: auto;
}
#logo{
width:334px;
height:166px;
margin:0;
}
#header{
width:166px;
height:166px;
float:left;
margin-left:834px;
margin-top:-166px;
}
#wrap{
margin:0;
padding:0;
width:1000px;
position:relative;
top:0px;
}
#sidebar1{
width:166px;
position:absolute;
top:0;
left:0;
}
#sidebar2{
width:166px;
position:absolute;
top:0;
right:0px;
}
#mainContent{
width:668px;
position:absolute;
left:166px;
}
</style>
</head>
<body>
<div id="page">
<div id="logo"><img src=".jpg" width="334" height="166" /></div>
<div id="header">
<h3>header </h3>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque </p>
</div><!-- fin de #header -->
<div id="wrap">
<div id="sidebar1">
<h3>Sidebar1 </h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div><!-- fin de #sidebar1 -->
<div id="sidebar2">
<h3>Sidebar2 </h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacu.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div><!-- fin de #sidebar2 -->
<div id="mainContent">
<h1> Contenu principal </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>en-tête de niveau H2 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div><!-- fin de #mainContent -->
</div><!-- fin de #wrap -->
<div id="footer">
<h3>footer </h3>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div><!-- fin de #footer -->
</div>
</body>
</html>
Un peu mieux ?
Je sais que c'est pas encore ca....
Je n'arrive pas a mettre mon footer en bas
Ca devrait le faire en float mais en float je n'y arrive pas pour le moment
Je persevere ....
) un peu de CSS :il faut savoir se remettre en cause... 
