28172 sujets

CSS et mise en forme, CSS3

[Résolu] Aligner verticalement div?

Bonjour!
J'ai un léger problème, je n'arrive pas à aligner mes div "barre1" et "barre2" au même niveau que le div "content" :



<!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>
#page {
	margin:auto;
	width:960px;
}


#header {
     width: 100%;
	 height:195px;
     margin: 0 auto;
	 background-color:#FF66CC;
}
#barre2 {
     float: right;
     width: 17%;
	 background-color:#669966;
    }
#barre1 {
     float: right;
     width: 21%;
	 background-color:#FF0066;
    }
#content {
    margin-left: 0;
	width:62%;
	background-color:#33FFFF;
    }
#footer {
     clear: both;
	 height:55px;
	 background-color:#CCFF00;
    }
</style>
</head>

<body>
<div id="page">
    <div id="header">Header</div>
    <div id="barre2">barre2</div>
    <div id="barre1">barre1</div>
    <div id="content">Contenu</div>
    <div id="footer">Footer</div>
</div>




</body>
</html>





Si vous avez une idée! Merci bien!

bonne après midi Smiley cligne upload/17907-screen.PNG
Modifié par rodhia (29 Oct 2008 - 13:34)
Vraiment personne n'a ne serait ce qu'un petite idée??? sa me bloque pour poursuivre mon design...
merci!
Bonjour,

Au hasard, mais c'est classique: un problème dû à l'arrondi des largeurs en pourcentages. 62% + 21% + 17%, ça fait bien 100%. Mais sur une largeur de 999px par exemple ça peut donner 620px + 210px + 170px = 1000px, soit un pixel de trop. Et si un flottant n'a pas la place de se caser, il vient se placer plus bas, là où il y a de la place.

Solution: le troisième élément (#content) ne devrait pas être flottant, mais devrait plutôt se contenter d'une marge à droite de 38%, ou bien utiliser un contexte de formatage pour que sa largeur s'adapte comme par magie aux flottants.

L'un et l'autre concept (utilisation d'une marge et d'un contexte de formatage) sont décrits dans ce tutoriel: Un design fluide avec trois «colonnes», grâce au positionnement flottant.
Bonjour,

En coup de vent:
-ne pas donner de largeur à #content;
-lui donner un margin-right au moins équivalent à la largeur cumulée de barre1 et barre2

ps: le width et le margin de #header ne sert à rien puisqu'il est déjà dans #page.
Modifié par Igor (28 Oct 2008 - 19:44)
Bonjour!
Voici le code pour que sa fonctionne :


<!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>
#page {
	margin:auto;
	width:960px;
}


#header {
	 height:195px;
	 background-color:#FF66CC;
}
#barre2 {
     float: right;
     width: 17%;
	 background-color:#669966;
    }
#barre1 {
     float: right;
     width: 21%;
	 background-color:#FF0066;
    }
#content {
    margin-left: 0;
	background-color:#33FFFF;
    }
#footer {
     clear: both;
	 height:55px;
	 background-color:#CCFF00;
    }
</style>
</head>

<body>
<div id="page">
    <div id="header">Header</div>
    <div id="barre2">barre2</div>
    <div id="barre1">barre1</div>
    <div id="content">Contenu</div>
    <div id="footer">Footer</div>
</div>




</body>
</html>


Merci!
Sujet clos
Aller à