28172 sujets

CSS et mise en forme, CSS3

Problème d'imbrication de <div>

Bonjour à tous,

Je rencontre un problème d'utilisation des div et des propriétés CSS sous jacentes. Voici la situation :
- On trouve 2 div de niveau 1 (ie. contenu directement dans le body), qui représente le haut et le bas de la page (ils doivent être extensible en hauteur en fonction du contenu, et occuper toute la largeur, pour y placer un background)
- Dans le div du haut, on trouve 3 div alignés les uns à coté des autres (avec float: left), leurs largeurs sont fixés, et les hauteur doivent être extensibles (c'est la hauteur la plus grande parmis les 3 qui fixe la hauteur du div supérieur, top_container dans mon code)
- Dans le div du bas, on trouve 2 div alignés côte à côte, les largeurs sont également fixées, et les hauteurs sont libres.

Le problème dans mon code est que les 2 div de niveau 1 au lieu d'être en dessous l'un de l'autre se retrouve superposé. J'ai essayé de bidouiller pas mal de trucs, j'ai pas mal cherché, et je trouve toujours pas de solution, donc je m'en remet à votre talent Smiley smile .

<div id="top_container">
	top_container<br/>
	<div id="col_top1">col_top1</div>
	<div id="col_top2">col_top2</div>
	<div id="col_top3">col_top3</div>
</div>

<div id="bottom_container">
	bottom_container<br />
	<div id="col_bot1">col_bot1</div>
	<div id="col_bot2">col_bot1</div>
</div>



body
{
	padding: 0;
	margin: 0;
}

div#top_container
{
	width: 1000px;
	border: 1px solid red;
	position: absolute;
}

div#bottom_container
{
	width: 1000px;
	border: 1px solid red;
	position: absolute;
}

div#col_top1
{
	width: 300px;
	border: 1px solid green;
	float: left;
}

div#col_top2
{
	width: 300px;
	border: 1px solid green;
	float: left;	
}

div#col_top3
{
	width: 300px;
	border: 1px solid green;
	float: left;	
}

div#col_bot1
{
	width: 300px;
	border: 1px solid green;
	float: left;	
}

div#col_bot2
{
	width: 300px;
	border: 1px solid green;
	float: left;	
}


Merci de vote future aide Smiley cligne
Bonjour,

tes top et bottom container sont en position absolute. c'est à cause de çà qu'elles sont superposées. çà devrait marcher si t'enlève les lignes:

position:absolute;
Modifié par tilsitt (11 Sep 2011 - 16:04)
Effectivement, c'est bien le cas si je retire les position: absolute, mais un nouveau problème apparait dans ce cas : les container ne s'adapte plus en hauteur en fonction du contenu des div intérieurs. C'est comme si les div intérieurs étaient à l'extérieur des container et ce n'est pas ça que je veux. Une idée ?
Ma version actuelle du code :


<div id="top_container">
	top_container<br/>
	<div id="col_top1">col_top1</div>
	<div id="col_top2">col_top2</div>
	<div id="col_top3">col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 col_top3 </div>
</div>

<div id="bottom_container">
	bottom_container<br />
	<div id="col_bot1">col_bot1</div>
	<div id="col_bot2">col_bot2</div>
</div>



body
{
	padding: 0;
	margin: 0;
}

div#top_container
{
	border: 1px solid red;
/*	position: absolute;*/
}

div#bottom_container
{
	border: 1px solid yellow;
	clear: both;
/*	position: absolute;*/
}

div#col_top1
{
	width: 300px;
	border: 1px solid green;
	float: left;
}

div#col_top2
{
	width: 300px;
	border: 1px solid green;
	float: left;	
}

div#col_top3
{
	width: 300px;
	border: 1px solid green;
	float: left;	
}

div#col_bot1
{
	width: 300px;
	border: 1px solid green;
	float: left;
}

div#col_bot2
{
	width: 300px;
	border: 1px solid green;
	float: left;	
}


Il faudrait que les 3 premiers div vert soit inclus dans le rouge, et pareil pour les 2 suivants dans le jaune.
quand tu utilises la propriété float pour faire des div flottantes, il faut ajouter élément qui utilise la propriété clear pour signifie que tu as fini la "ligne" dans la div container. par exemple:

<div id="top_container">

	top_container<br/>

	<div id="col_top1">col_top1</div>

	<div id="col_top2">col_top2</div>

	<div id="col_top3">col_top3 </div>

	[b]<div class="clear"></div>[/b]

</div>

et dans ton css:
.clear
{
clear: both;
}

Modifié par tilsitt (11 Sep 2011 - 16:30)
Sujet clos
Aller à