Deux colonnes DIV qui cassent tout !

Commmint · 22 Février 2005

Bonjour à tous !

Voila une construction de page en CSS qui fonctionne et accueille correctement du texte dans le DIV "contenu" jusqu'à ce que je décide de définir deux colonnes de texte (div para). Le footer se fait bouffer. Comment faire pour continuer à imbriquer des DIV dans le DIV contenu sans casser l'architecture ? J'hésite à modifier le DIV conteneur, ou alors le footer, ou alors...

Merci d'avance !!! :rolleyes:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#global {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 600px;
	background-color: #eeeeee;
}
#menu {
	width: 200px;
	position: absolute;
	background-color: #ff8800;
}
#header {
	width: 100%;
	background-color: #336600;
	height: 100px;
}
#contenu {
	background-color: #ff7700;
	margin-left: 200px;
	padding: 10px;
}
#footer {
	width: 100%;
	background-color: #225599;
	height: 50px;
}
#para {
	width: 170px;
	float: left;
	margin-right: 15px;
	font-family: Tahoma;
	font-size: 11px;
	line-height: 15px;
}
-->
</style>
</head>

<body>
<div id="global"> 
  <div id="header">salut le header</div>
    
  <div id="menu">
    <p>salut le menu</p>
    <p>et les autres trucs de ouf</p>
    <p>et hop</p>
  </div>
  <div id="contenu"> 
    <div id="para">
	Lorem ipsum ea audire disputando ullamcorper mei, vim no magna aliquid equidem. Fastidii pericula intellegebat ad eum, eos quem graeci instructior ei. Vel percipit molestiae ut, sed ne quaeque assueverit, duo at novum consulatu instructior. Ad ancillae quaerendum mei, eum ad illud antiopam scripserit. Cum idque commune consequat eu, tota quidam cetero qui at, luptatum adolescens dissentias eos in.
	</div>
	<div id="para">
  Lorem ipsum ea audire disputando ullamcorper mei, vim no magna aliquid equidem. Fastidii pericula intellegebat ad eum, eos quem graeci instructior ei. Vel percipit molestiae ut, sed ne quaeque assueverit, duo at novum consulatu instructior. Ad ancillae quaerendum mei, eum ad illud antiopam scripserit. Cum idque commune consequat eu, tota quidam cetero qui at, luptatum adolescens dissentias eos in. Ad novum equidem quo. Has ex congue ridens, te delicata necessitatibus nec. Quodsi discere delicatissimi no eos, eu sed altera malorum legendos, agam reprehendunt pro in. Dico legimus democritum cum et, ludus temporibus ius in. Usu te liber omnium percipit, ad sea fugit ceteros. Eos ad virtute invidunt omittantur.
	</div>
  </div>
  <div id="footer">salut le footer</div>
</div>
</body>
</html>

Modifié 22 Février 2005 par Commmint

Commmint · 22 Février 2005

"clear:both;" sur le DIV footer fait l'affaire en terme de placement, mais le fond du DIV contenu est désormais tronqué.

K-ZimiR · 22 Février 2005

Bonjour,

d'emblée : tu utilises 2x <div id="para">

L'élément id doit être unique sinon il faut utiliser une classe.

J'ai noté aussi des différences de positionnement entre IE et FF.

Je me penche sur le problème

K-ZimiR · 22 Février 2005

Bon, voilà

Essaye voir ça :

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
	<!--
	#global {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 600px;
	background-color: #eeeeee;
	}

	#menu {
	float:left;
	width: 200px;
	background-color: #ff8800;
	}

	#header {
	width: 100%;
	background-color: #336600;
	height: 100px;
	}

	#contenu {
	margin-left: 200px;
	padding: 10px;
	}

	#footer {
	width: 100%;
	background-color: #225599;
	height: 50px;
	clear: both;
	}
	.para {
	width: 170px;
	float: left;
	margin-right: 15px;
	font-family: Tahoma;
	font-size: 11px;
	line-height: 15px;
	}
	-->
</style>
</head>

<body>
	<div id="global">
  <div id="header">salut le header</div>
    
  <div id="menu">
     <p>salut le menu</p>
     <p>et les autres trucs de ouf</p>
     <p>et hop</p>
  </div>
  
  <div id="contenu">
 	 <div class="para">
    Lorem ipsum ea audire disputando ullamcorper mei, vim no magna aliquid equidem. Fastidii pericula intellegebat ad eum, eos quem graeci instructior ei. Vel percipit molestiae ut, sed ne quaeque assueverit, duo at novum consulatu instructior. Ad ancillae quaerendum mei, eum ad illud antiopam scripserit. Cum idque commune consequat eu, tota quidam cetero qui at, luptatum adolescens dissentias eos in.
 	 </div>
 	 <div class="para">
    Lorem ipsum ea audire disputando ullamcorper mei, vim no magna aliquid equidem. Fastidii pericula intellegebat ad eum, eos quem graeci instructior ei. Vel percipit molestiae ut, sed ne quaeque assueverit, duo at novum consulatu instructior. Ad ancillae quaerendum mei, eum ad illud antiopam scripserit. Cum idque commune consequat eu, tota quidam cetero qui at, luptatum adolescens dissentias eos in. Ad novum equidem quo. Has ex congue ridens, te delicata necessitatibus nec. Quodsi discere delicatissimi no eos, eu sed altera malorum legendos, agam reprehendunt pro in. Dico legimus democritum cum et, ludus temporibus ius in. Usu te liber omnium percipit, ad sea fugit ceteros. Eos ad virtute invidunt omittantur.
 	 </div>
  </div>
  <div id="footer">salut le footer</div>
	</div>
</body>
</html>

Commmint · 22 Février 2005

SI SI c'est bon, MERCI !!!

par contre la marge du DIV contenu n'est pas respectée :fou:

Je cherche encore !

ah ben non en fait :boude:

Modifié 22 Février 2005 par Commmint

Antoine Cailliau · 22 Février 2005

C'est un truc comme ça que tu veux ? http://openweb.eu.org/articles/initiation_...es/annexe3.html

je regarderai ton code quand je serai sur Mon pc :s

xpatval · 22 Février 2005

Si c'est de 2 div // à l'intérieur d'un div conteneur (centré dans la page) dont tu parles, j'ai résolu le problème de la sorte:

[U]Le maitre des conteneurs !![/U]
#cont {
position: absolute;
width:100%;
padding:0;
margin:0;

[U]Le central[/U]
#cent {
min-height: 400px;
margin-left: 150px;
margin-right: 150px;
}

[U]le div gauche[/U]
#gauche { 
float: left;
left: 5px; 
width: 47%;   <=== PAS de 50% (merci le hub pour l'astuce)
}

[U]Le droit[/U]
#droit { 
margin-left: 5px;
float: right;
width: 50%;
}

Si ça peut t'aider...

xpatval

Commmint · 23 Février 2005

J'ai pas trop de problèmes pour créer des colonnes dans un DIV ABSOLUT, le problèmes est que ce DIV conteneur est lui même intégré à une architecture plus complexe. je vous fourni le code de la page réelle dans la matinée !

merci

ps: le DIV conteneur est fixé en largeur, et ce DIV conteneur doit pouvoir pousser un DIV footer vers le bas en fonction de la hauteur des colonnes !!! :gueule:

Modifié 23 Février 2005 par Commmint

Connexion

Deux colonnes DIV qui cassent tout !

Sujets conseillés

Commmint

Commmint

K-ZimiR

K-ZimiR

Commmint

Antoine Cailliau

xpatval

Commmint

Veuillez vous connecter pour commenter

Parcourir

Activité