Des divs dans un div

Bonjour à toutes et à tous,

j'ai une petite galère avec mon code CSS, il doit me manquer quelque chose.

En gros j'ai un calque qui en contient deux autres.

Je souhaite que mon calque "mainbox" aie des bords arrondis styles (avec ombre), j'utilise une technique basée sur 3 images. Je ne sais pas si c'est ce qui interfere...

Voilà en gros mon code (j'ai laissé du code CSS inline pour le moment car je ne m'en sors pas

<div class="mainbox">
<div class="content-mainbox">
<h1>TITLE </h1>
<div class="bigBanner">MA BANNIERE</div>
 <div style="width:470px; margin-right:25px; text-align:justify; float:left"><p>MON TEXTE</p></div>

<div style="width:300px; float:left"><img src="XXX" />MON IMAGE</div>

</div>
<div class="bottom-mainbox">&nbsp;</div>
</div>

à combiner avec ceci

.mainbox {
background: url(../img/background/main_top_bg.gif) center top no-repeat;
padding-top: 10px;
width: 825px;
float: left;
margin-left: 10px;
background-color:#F5F5E9;
}
.content-mainbox {
background: url(../img/background/main_middle_bg.gif) center top repeat-y;
}
.bottom-mainbox {
background:  url(../img/background/main_bottom_bg.gif) center bottom no-repeat;
height: 10px;
}
.content-mainbox  P{
margin: 0 30px 5px 30px;
}
.content-mainbox h1
{
margin: 0 30px 15px 30px;
font-size:1.7em;
border-bottom:#B3E25A 2px solid;
color:#3E671B;
}

En fait ce sont mes div contenant MON TEXTE et MON IMAGE qui ne passent pas. Le calque mainbox "se referme" en haut de ses calques.

Si j'enleve les attributs float de ces calques, ca passe, mais je perd l'alignement texte à gauche, image à droite... j'ai donc si je ne me trompe pas des calques qui sortent du flux ...

Je ne sais pas si j'ai bien expliqué mon probleme, je peux donner bien sur plus d'infos (ça fait plusieurs fois que je reviens sur ce probleme je n'arrive pas à le resoudre).

HS: J'ai lu à plusieurs endroits sur le site qu'il fallait eviter les flottants mais comment gérer l'aligmenent de ces calques alors?

Merci d'avance pour votre aide,

Cyan

Salut!

En regardant ton code, étant donné que tu utilise les float, je te propose d'ajouter un <div class="clear"></div>

<div class="mainbox">
<div class="content-mainbox">
<h1>TITLE </h1>
<div class="bigBanner">MA BANNIERE</div>
 <div style="width:470px; margin-right:25px; text-align:justify; float:left"><p>MON TEXTE</p></div>

<div style="width:300px; float:left"><img src="XXX" />MON IMAGE</div>

</div>

[#red]<div class="clear"></div>[/#]
<div class="bottom-mainbox">&nbsp;</div>
</div>

et ceci dans ton code css:

.clear{
   clear:both;
}

Ceci permettra normalement de forcer le div bigBanner à rester dans le flux.

EDIT: essaie d'abord de mettre uniquement un "clear:both;" à la classe "bottom-mainbox"

++
Modifié par Oryo (25 May 2009 - 17:22)

Salut,

je n'ai pas bien compris ton problème donc dans le doute je te conseille de lire :

* dépassement des flottants.

* fusion des marges.

Et en bonus Comité Contre les Calques.