Bonjour à tous... je bloque sur le layout suivant :
J'aimerais avoir deux div (A et B) de taille variable (en fonction du contenu) cote à cote dans un troisième div (container). Et j'aimerais que chacun des deux div occupent 100% de la hauteur du container.
Exemple :
A et B mesurent 300px de haut, à cause de leur contenu.
Du nouveau contenu arrive dans A : la hauteur passe de 300px à 600px. J'aimerais que B soit redimensionné à cette même taille!
Pour que cela fonctionne, j'ai l'impression que le div contenu doit avoir une taille de 100%, mais aussi une position absolue. Hors, en position absolue, j'ai l'impression que les changements de taille ne sont plus répercutés au container... je suis bloqué ici!
Voici ce que j'ai pour l'instant :
Dans cet exemple, j'aimerais avoir la colonne du milieu séparée en deux colonnes de même hauteurs (vert et violet), quels que soient les contenus à droite et à gauche...
Est-ce qu'il est possible de réaliser ça uniquement en CSS ?
Merci de votre aide!
Modifié par Supermann (14 Apr 2011 - 14:40)
J'aimerais avoir deux div (A et B) de taille variable (en fonction du contenu) cote à cote dans un troisième div (container). Et j'aimerais que chacun des deux div occupent 100% de la hauteur du container.
Exemple :
A et B mesurent 300px de haut, à cause de leur contenu.
Du nouveau contenu arrive dans A : la hauteur passe de 300px à 600px. J'aimerais que B soit redimensionné à cette même taille!
Pour que cela fonctionne, j'ai l'impression que le div contenu doit avoir une taille de 100%, mais aussi une position absolue. Hors, en position absolue, j'ai l'impression que les changements de taille ne sont plus répercutés au container... je suis bloqué ici!
Voici ce que j'ai pour l'instant :
body {
margin:0;
padding:0;
width:100%;
height:auto;
}
div#centerer {
position:relative;
height:100%;
width:1000px;
margin:0 auto;
background-color:#55f;
}
div#container {
position:relative;
height:auto;
border:1px solid red;
margin-top:90px;
}
div#A {
background-color:#5f5;
position:relative;
height:100%;
width:500px;
float:left;
display:inline-block;
}
div#B {
position:relative;
height:100%;
width:500px;
margin-left:500px;
}<html>
<head>
<style>
body {
margin:0;
padding:0;
width:100%;
height:auto;
}
div#centerer {
position:relative;
height:100%;
width:1000px;
margin:0 auto;
background-color:#55f;
}
div#container {
position:relative;
height:auto;
border:1px solid red;
margin-top:90px;
}
div#A {
background-color:#5f5;
position:relative;
height:100%;
width:500px;
float:left;
display:inline-block;
}
div#B {
position:relative;
height:100%;
width:500px;
margin-left:500px;
}
</style>
</head>
<body>
<div id="centerer">
<div id="container">
<div id="A">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas ultrices ligula, non commodo libero accumsan in. Quisque consectetur blandit mauris vel pretium. Maecenas eu nunc nec velit ultricies lobortis ac volutpat eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed enim arcu. Sed arcu lorem, lobortis pellentesque lobortis sit amet, pretium ut arcu. Nullam ullamcorper semper sem quis dignissim. Fusce viverra blandit viverra. Etiam euismod, augue ac cursus commodo, augue nisi tincidunt felis, ac rutrum est enim eget augue. Pellentesque ut lobortis metus. Nullam mi ipsum, mollis nec fringilla sed, rutrum in orci. Ut ultricies diam id velit vehicula iaculis vestibulum nulla congue. Pellentesque volutpat elit purus, sed fringilla leo. Nulla ut magna ut eros varius sagittis at sed ipsum. Phasellus aliquet velit at ipsum faucibus eu vehicula urna scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas ultrices ligula, non commodo libero accumsan in. Quisque consectetur blandit mauris vel pretium. Maecenas eu nunc nec velit ultricies lobortis ac volutpat eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed enim arcu. Sed arcu lorem, lobortis pellentesque lobortis sit amet, pretium ut arcu. Nullam ullamcorper semper sem quis dignissim. Fusce viverra blandit viverra. Etiam euismod, augue ac cursus commodo, augue nisi tincidunt felis, ac rutrum est enim eget augue. Pellentesque ut lobortis metus. Nullam mi ipsum, mollis nec fringilla sed, rutrum in orci. Ut ultricies diam id velit vehicula iaculis vestibulum nulla congue. Pellentesque volutpat elit purus, sed fringilla leo. Nulla ut magna ut eros varius sagittis at sed ipsum. Phasellus aliquet velit at ipsum faucibus eu vehicula urna scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas ultrices ligula, non commodo libero accumsan in. Quisque consectetur blandit mauris vel pretium. Maecenas eu nunc nec velit ultricies lobortis ac volutpat eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed enim arcu. Sed arcu lorem, lobortis pellentesque lobortis sit amet, pretium ut arcu. Nullam ullamcorper semper sem quis dignissim. Fusce viverra blandit viverra. Etiam euismod, augue ac cursus commodo, augue nisi tincidunt felis, ac rutrum est enim eget augue. Pellentesque ut lobortis metus. Nullam mi ipsum, mollis nec fringilla sed, rutrum in orci. Ut ultricies diam id velit vehicula iaculis vestibulum nulla congue. Pellentesque volutpat elit purus, sed fringilla leo. Nulla ut magna ut eros varius sagittis at sed ipsum. Phasellus aliquet velit at ipsum faucibus eu vehicula urna scelerisque.</p>
</div>
<div id="B">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas ultrices ligula, non commodo libero accumsan in. Quisque consectetur blandit mauris vel pretium. Maecenas eu nunc nec velit ultricies lobortis ac volutpat eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed enim arcu. Sed arcu lorem, lobortis pellentesque lobortis sit amet, pretium ut arcu. Nullam ullamcorper semper sem quis dignissim. Fusce viverra blandit viverra. Etiam euismod, augue ac cursus commodo, augue nisi tincidunt felis, ac rutrum est enim eget augue. Pellentesque ut lobortis metus. Nullam mi ipsum, mollis nec fringilla sed, rutrum in orci. Ut ultricies diam id velit vehicula iaculis vestibulum nulla congue. Pellentesque volutpat elit purus, sed fringilla leo. Nulla ut magna ut eros varius sagittis at sed ipsum. Phasellus aliquet velit at ipsum faucibus eu vehicula urna scelerisque.</p>
</div>
</div>
</div>
</body>
</html>Dans cet exemple, j'aimerais avoir la colonne du milieu séparée en deux colonnes de même hauteurs (vert et violet), quels que soient les contenus à droite et à gauche...
Est-ce qu'il est possible de réaliser ça uniquement en CSS ?
Merci de votre aide!
Modifié par Supermann (14 Apr 2011 - 14:40)