Bonjour,
Technique des colonnes factices:
http://www.pompage.net/pompe/colonnesfactices/
Ici, on aura une image de fond répétée en hauteur attribuée à div#contener.
On veillera à bien utiliser les propriétés
background-image,
background-position et
background-repeat, ou la propriété raccourci
background. Il faudra réviser leur fonctionnement s'il n'est pas bien connu.
Autre solution possible:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
div.container {
overflow: hidden;
width: 500px;
margin: 20px auto;
padding: 15px;
border: solid 1px green;
}
div.container p {
margin: 0;
font: .8em/1.4 Arial, Helvetica, sans-serif;
}
div.container p + p {
margin-top: .5em;
}
div.left {
float: left;
width: 235px;
padding-right: 15px;
border-right: solid 1px red;
text-align: right;
}
div.right {
margin-left: 250px;
padding-left: 15px;
border-left: solid 1px red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</div>
<div class="right">
<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</div>
</div>
<div class="container">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
<div class="right">
<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie.</p>
</div>
</div>
<div class="container">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.</p>
</div>
<div class="right">
<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.</p>
</div>
</div>
</body>
</html>
Explication: les flottants survolent les blocs et ne repoussent que leur contenu, sauf si ces blocs:
- définissent un contexte de formatage (via un
overflow: auto ou
overflow: hidden, notamment);
- sont dotés du
layout dans Internet Explorer.
(Le deuxième point est spécifique à Internet Explorer et ne correspond pas à un comportement standard. Voir la FAQ du forum à propos du HasLayout.)
Modifié par Florent V. (12 Feb 2008 - 14:28)
