Bonjour,
Juste pour le fun car je ne sais pas si c'est très pratique car la colonne du centre ne "pousse" pas le conteneur. Ca m'a l'air compatible FF et IE6 à 7.
<!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>
<title>Test</title>
<style type="text/css">
*{padding: 0; margin: 0;}
#conteneur {
overflow: hidden;
width: 900px;
margin: auto;
border: 2px solid black;
position: relative;
}
#gauche{
width: 450px;
overflow: hidden;
float: left;
background: transparent;
}
#gauche_cache_image{
width: 250px;
height: 200px;
float: right;
background: transparent;
margin: 15px 0 0 15px;
}
#droite{
width: 450px;
overflow: hidden;
float: right;
background: transparent;
}
#droite_cache_image{
width: 250px;
height: 200px;
float: left;
background: transparent;
margin: 15px 15px 0 0;
}
#image{
width: 500px;
height: 200px;
background: blue url(image.jpg);
position: absolute;
top: 15px;
left: 50%;
margin-left: -250px;
}
p{
text-align: justify;
}
#gauche p{
margin:15px 165px 15px 15px;
}
#droite p{
margin: 15px 15px 15px 165px;
}
#colonne_centre{
width: 300px;
background: transparent;
position: absolute;
top: 215px;
left: 50%;
margin-left: -150px;
overflow: hidden;
}
#colonne_centre p{
margin: 9px 15px 15px 15px;
}
#image p{
font-size: 2.5em;
color: #fff;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="gauche">
<div id="image">
<p> Ceci est l'image </p>
</div>
<div id="colonne_centre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris orci magna, ultrices ac, condimentum in, molestie quis, nisi. Curabitur sit amet arcu rhoncus nisl tempor interdum. Ut non leo. Sed eros odio, consectetuer sit amet, fringilla sit amet, fringilla a, leo. Duis auctor. Sed vulputate est eu arcu. Aenean augue nulla, blandit a, rutrum sit amet, accumsan eget, mi. Praesent sit amet magna. Duis lobortis sollicitudin enim. Vivamus euismod nulla eu risus.
</p>
<p>Vestibulum bibendum ante a dolor suscipit auctor. Cras et augue vel sem congue pharetra. Vivamus posuere turpis. Donec suscipit tellus venenatis lacus. Maecenas nisl arcu, volutpat sit amet, placerat quis, feugiat nec, metus. Duis ornare turpis nec odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sodales, augue vel ultrices pharetra, magna magna adipiscing justo, eu ornare ante augue at magna. Sed sed </p>
</div>
<div id="gauche_cache_image">
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris orci magna, ultrices ac, condimentum in, molestie quis, nisi. Curabitur sit amet arcu rhoncus nisl tempor interdum. Ut non leo. Sed eros odio, consectetuer sit amet, fringilla sit amet, fringilla a, leo. Duis auctor. Sed vulputate est eu arcu. Aenean augue nulla, blandit a, rutrum sit amet, accumsan eget, mi. Praesent sit amet magna. Duis lobortis sollicitudin enim. Vivamus euismod nulla eu risus.
</p>
<p>
Vestibulum bibendum ante a dolor suscipit auctor. Cras et augue vel sem congue pharetra. Vivamus posuere turpis. Donec suscipit tellus venenatis lacus. Maecenas nisl arcu, volutpat sit amet, placerat quis, feugiat nec, metus. Duis ornare turpis nec odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sodales, augue vel ultrices pharetra, magna magna adipiscing justo, eu ornare ante augue at magna. Sed sed lacus. Etiam vehicula diam lobortis augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ac ante. Curabitur quis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porta tempor mi. Sed feugiat mauris vitae nisi
<p>
</div>
<div id="droite">
<div id="droite_cache_image">
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris orci magna, ultrices ac, condimentum in, molestie quis, nisi. Curabitur sit amet arcu rhoncus nisl tempor interdum. Ut non leo. Sed eros odio, consectetuer sit amet, fringilla sit amet, fringilla a, leo. Duis auctor. Sed vulputate est eu arcu. Aenean augue nulla, blandit a, rutrum sit amet, accumsan eget, mi. Praesent sit amet magna. Duis lobortis sollicitudin enim. Vivamus euismod nulla eu risus.
</p>
<p>
Vestibulum bibendum ante a dolor suscipit auctor. Cras et augue vel sem congue pharetra. Vivamus posuere turpis. Donec suscipit tellus venenatis lacus. Maecenas nisl arcu, volutpat sit amet, placerat quis, feugiat nec, metus. Duis ornare turpis nec odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sodales, augue vel ultrices pharetra, magna magna adipiscing justo, eu ornare ante augue at magna. Sed sed lacus. Etiam vehicula diam lobortis augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ac ante. Curabitur quis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porta tempor mi. Sed feugiat mauris vitae nisi
<p>
</div>
</div>
</div>
</body>
</html>
