Bonjour,
Ton css m'a l'air bien compliqué pour ce type de mise en page, comme j'avais un gabarit de ce type dans un coin, il doit être compatible IE et FF.
J'ai, vite fait, essayé de trier un peu mais bon, ça vaut ce que ça vaut...
Et si ça peut être utile !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
#fond {
background-color: #7e7e7e;
margin-left:auto;
margin-right:auto;
width:950px;
}
#conteneur {
margin:0 auto 0 auto;
padding-right: 15px;
padding-left: 15px;
width:910px;
overflow:hidden;
background-color: #35ffee;
}
#header {
margin: 0;
padding: 0;
width: 100%;
height: 170px;
background-color: red;
position: relative;
}
ul {
list-style-type: none;
width: 100%;
position: absolute; bottom :0;
margin:0;
left: 250px;
padding: 0;
}
.menu li {
float: left;
}
.menu a {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
.menu a:hover {
background: #ccc;
border: 1px solid gray;
}
#gauche {
width:690px;
float:left;
margin-top: 4px;
padding: 0;
}
.bloc_gauche {
width:100%;
background-color: #fff;
margin-bottom: 20px;
}
.bloc_gauche p{
margin: 0;
margin-right: 10px;
margin-left: 10px;
}
#droite {
float: right;
width:200px;
margin-top: 4px;
padding: 0;
}
.bloc_droit {
width:100%;
background-color: #a7ffd3;
margin-bottom: 20px;
}
.bloc_droit p{
margin: 0;
margin-right: 10px;
margin-left: 10px;
}
#footer {
clear: both;
height:50px;
background-color: #f900fc;
}
#footer p{
margin: 0;
margin-right: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="fond">
<div id="conteneur">
<div id="header">
<ul class="menu"><li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li></ul>
</div>
<div id="gauche">
<div class="bloc_gauche">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque felis. Praesent semper leo eu nibh. Proin pretium tellus ut urna. Sed suscipit risus eget pede. Vivamus nec erat. Quisque at enim sed metus tristique lobortis. Fusce pede felis, accumsan vitae, accumsan eu, bibendum at, arcu. Proin tortor. Proin viverra. Donec at tellus. Praesent lacinia. Aenean tellus. Praesent suscipit pretium tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus turpis purus, nonummy non, commodo sit amet, posuere ac, libero. Vestibulum dignissim. Aliquam fringilla odio sit amet sapien vehicula bibendum. In erat felis, fringilla in, viverra ac, ultrices lacinia, nisi.
</p>
</div>
<div class="bloc_gauche">
<p>Morbi sagittis diam eget est. In sed augue ac dui rutrum porttitor. Nulla facilisi. Donec vitae neque non ante pharetra venenatis. Donec tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lorem magna, pretium ac, semper in, nonummy porta, nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus volutpat ultrices justo. Cras vitae ipsum
</p>
</div>
<div class="bloc_gauche">
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque sagittis, risus id lobortis mollis, elit lectus tincidunt ante, quis hendrerit felis nibh non mi. Vestibulum vulputate, nibh a convallis euismod, leo ipsum varius risus, non feugiat orci neque volutpat leo. Curabitur et enim ut quam bibendum luctus. Sed elementum massa in risus. Etiam sagittis. Nulla a ante molestie ipsum pulvinar dignissim. Quisque imperdiet lacus sit amet ante. Nullam ullamcorper sollicitudin ipsum. Proin in ligula. Fusce pretium. Ut quis libero. In consequat, pede ac gravida ornare, lacus est dapibus lacus, vel feugiat pede neque a eros. Praesent tempor, justo convallis pulvinar adipiscing, lorem erat vehicula odio, id congue odio dui at tellus. Phasellus pharetra euismod ipsum. Sed interdum, metus quis aliquet dapibus, ante massa luctus tortor, nec aliquet massa sem sit amet risus. Proin sit amet lorem at massa pretium commodo. Nam eu lacus.
</p>
</div>
</div>
<div id="droite">
<div class="bloc_droit">
<p>Proin non risus. Sed dictum. Integer feugiat. Fusce volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
n
</p>
</div>
<div class="bloc_droit">
<p>Proin non risus. Sed dictum. Integer feugiat. Fusce volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eu lectus sed lacus adipiscing fringilla. Fusce ultricies elit non lectus. Nullam lacus.
</p>
</div>
</div>
<div id="footer">
<p>Proin non risus. Sed dictum. Integer feugiat. Fusce volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
</div>
</body>
,