[css] mettre 2 div côte à côte sans sortir du flux

Marsh Posté le 17-04-2011 à 16:51:05

Bonjour,
Je poste ici car j'ai essayé beaucoup de choses et les exemples/tutos sont difficilement adaptables à ma situation, donc je désespère un peu...
Mon site comporte pas mal de div, ce qui m'a obligé à faire un div de contenu au centre de la page.

Au final je me retrouve avec un grand div "CentreD" qui est en position:relative et dedans je souhaite mettre deux div côté à côté (style classique |menu| |corps|).
Mais [:icon4] grand zut ET c'est la où est le problème : je veut que le grand div centreD s'agrandisse en fonction du contenu des deux autres div (menu et corps) et je ne peut donc pas utiliser de float ou autre astuces qui font sortir les div du flux et donc qui en cas de contenu trop grand dépasse du grand div "centreD"...

exemple si "corps" dispose d'un grand contenu et agrandi automatiquement "centreD"
.....................div centreD..............
.| menu | | |.
.| | | |.
.| | | div |.
.|_____ | | corps |.
. | |.
. | |.
...................................................
ou si "menu" comporte plus de contenu que "corps" :
.....................div centreD..............
.| menu | | |.
.| | | |.
.| | | div |.
.| | | corps |.
.| | |____________________ |.
.| | .
.............................................................................
En gros je veut ce schéma MAIS SANS l'utilisation de float ou autre techniques qui casse le flux et donc fait dépassé le contenu de centreD.

voila mon code si ça intéresse mais le problème est que même en imbriquant les div, la position:relative amène à la ligne...

fichier html :

Code :

<div id="centreD">
<div id="menu">
<br/>rubrique1<br/>rubrique2<br/>rubrique3<br/>rubriqueN<br/>enfin menu latéral quoi...
</div>
<div id="corps">
blablablabla texte qui montre des choses zuperzoli...<br/>blablablabla texte qui montre des choses zuperzoli...<br/>blablablabla texte qui montre des choses zuperzoli...<br/>blablablabla texte qui montre des choses zuperzoli...<br/>........
</div>
</div>

fichier CSS :

Code :

#centreD
{
position:relative;
background-image: url("../images/BORDURE DROITE.jpg" );
background-repeat: repeat-Y;
background-position:right;
}
#menu
{
position:relative;
width:100%;
border:1px solid green;
}
#corps
{
width: 61%;
margin-left:auto;
margin-right:auto;
margin-top:55px;
margin-bottom:45px;
min-height:300px;
border:1px solid red;
}

si vous essayez mon code avec un float ou autre, pensez à ajouter beaucoup de texte pour remplir menu ou corps (et voir si ils dépassent de centreD)

En remerciant d'avance ceux qui sont prêt à essayer ou à m'aider dans mon petit problème

Reply

Marsh Posté le 17-04-2011 à 16:51:05

Reply

Marsh Posté le 19-04-2011 à 10:57:29

Normalement on doit pvoir arranger ça avec display: inline-block, mais ça reste encore parfois compliqué pr obtenir le meme rendu sur tt les navigateurs.

Le bon vieux truc qui marche bien :

Tu met donc dans ton div principal tes deux colonnes en float,
et un troisieme bloc, tjrs dans ton div principale, avec la propriété clear: both;

Si tes deux colonnes et ce bloc sont de type bloc, ce troisieme bloc restera en dessous des deux en float, et comme il est dans le flux, ton conteneur s'agrandira en hauteur de façon a l'englober.

Code :

<!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>Document sans nom</title>
<style type="text/css">
body{
background: #000;
margin: 0;
padding: 0;
}
#conteneur{
background: #FFF;
width: 700px;
margin: 0 auto;
}
#colonne1{
float: left;
width: 250px;
height: 400px;
background: #F00;
}
#colonne2{
float: left;
width: 450px;
height: 200px;
background: #FF0;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="colonne1">colonne1</div>
<div id="colonne2">colonne2</div>
<div class="clear"></div>
</div>
</body>
</html>

FF et IE7/8 approved (et surement IE6 aussi je m'en occupe plus perso)
(et avec de jolies couleurs pr picouiller les yeux )

PS : et si tu a un footer en bas de ton contenu pas besoin d'un div exprès pr le clear, le footer s'en charge.

Message édité par vanish le 19-04-2011 à 11:14:00

Reply

Marsh Posté le 19-04-2011 à 21:19:50

Merci, cela peut être très utile pour pas ce prendre la tête

j'avais plus ou moins résolu mon problème avec des "display : table-cell" qui reviennent à faire un tableau de divs (à englober dans un display: block ou table-row).
Mais j'ai eu un petit problème avec les tables-cell et IE8, pour aligner une image et du texte dans deux div collés donc je vais enfin pouvoir virer un <table> qui trainait ^^

Reply

Marsh Posté le 19-04-2011 à 21:22:41

et pi si c'est pr faire des tableaux en div autant continuer sur les table de base lol