28172 sujets

CSS et mise en forme, CSS3

Taille de div et padding

Salut à tous,

Alors j'ai un petit souci :
Je suis en train de coder un site structuré avec 2 div horizontalement:
Une pour le menu à gauche, une pour le contenu à droite.
Seulement mon problème est le suivant : la div de gauche ne veut pas s'étirer en fonction de celle de droite (je soupçonne les padding d'y être pour quelque chose!)
Avez vous une solution ?

Merci d'avance
<body>
		<div id="header">
		</div>

		<div id="contenu">
			 <div id="menu_gauche"></div>
			 <div id="colonne_droite"></div>
                 </div>

		<div id="footer">
			coucou
		</div>
</body>



Voila la structure, sachant qu'il y a un float: left sur le menu de gauche

edit: faute de frappe dans le code
Modifié par BeNiGoNe (02 Apr 2011 - 18:16)
Déjà ceci : </diV ??? Faute de frappe, sans nul doute.
Modifié par lddsoft (02 Apr 2011 - 18:13)
Oui pardon, c'est bien une faute de frappe sur le forum/

Voila le css

#contenu {
	width: 955px;
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 1px;
}

#colonne_droite {
	float: left;
	width: 705px;
	background-color: white;
}

#menu_gauche {
	float: left;
	width: 250px;
	background-color: #7a7861;
	margin-bottom: 1px;
}
Il y a encore d'autres problèmes, mais je n'ai hélas pas le temps maintenant!
A tout à l'heure!
Est-ce que tu cherches à obtenir quelque chose comme ceci ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
	body {background: #ccc}
#contenu {
	background: #fff;
	width:955px;
	margin: 1px auto 0 auto;
}
#header {
	background: #ffffcc;
	text-align: center
}
#menu_gauche {
	float:left;
	width:250px;
	background-color:#7a7861;
	margin-bottom: 1px;
	padding-left: 15px;
}
#colonne_droite {
	float: left;
       background-color: white;
	padding-left: 15px;
}
#footer {
	clear: both;
	background: #eaeaea;
	text-align: center
}
</style>
</head>
<body>
<div id="contenu">
	<div id="header">header<br /><br /><br /><br /></div>
	<div id="menu_gauche">menu gauche<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
	<div id="colonne_droite">colonne droite<br /><br /><br /><br /><br /><br /><br /><br /></div>
	<div id="footer">coucou<br /><br /></div>
</div>
</body>
</html>

N.B.: ne prête pas attention aux balises < br />. C'est pour remplir l'espace Smiley langue
Modifié par lddsoft (02 Apr 2011 - 20:11)
Oui c'est ça, seulement ma colonne de gauche ne suit pas en hauteur celle de droite, merci de t'intéresser a mon problème en tout cas.
Tu vois des fautes dans mon css ?
Modifié par BeNiGoNe (02 Apr 2011 - 20:43)
BeNiGoNe a écrit :
Oui c'est ça, seulement ma colonne de gauche ne suit pas en hauteur celle de droite

Pourquoi tu ne le disais pas dès le départ? Smiley smile
Ce problème a été abordé à maintes reprises, notamment sur ce forum. Puis-je te demander de faire quelques recherches de ton côté.
Je craignais que tu dises ça ^^
J'ai déja essayé le body{height: 100%} et d'autres trucs mais pas moyen ...
Sujet clos
Aller à