Positionnement div/css
Bonjour,
je souhaite mettre côte à côte 3 div, de gauche à droite: gallery - description - avis; je les ai imbriqué dans une div article
J'ai crée mon style avec CSS, cela s'affiche bien mais si je fais un zoom (crtl + souris) les div description et avis vont dans gallery
Je vous laisse mon code
#article {
position: absolute;
padding: 3em 0 0 0;
margin: 20px; auto;
width: 70%;
}
#gallery{
float: left;
width: 40%;
}
#description {
padding: 0 0 0 40px;
float: left;
width:35%;
color: #B1e100;
font-size: 1.8em;
background:url(search.png) no-repeat left top;
}
#avis {
float: left;
padding: 10px 0px 0 70px;;
width: 15%;
font-size: 1.8em;
color: #B1E100;
background:url(comment.png) no-repeat top left;
}
HTML:
<div id="article">
<div id="gallery">
Lorem ipsum
<div id="description">
Contenu: lorem ipsum
</div>
<div id="avis">Votre Avis </div>
Je vous remercie d'avance de m'éclairer ou de me corriger
Céline
ps: mon site n'est pas en ligne ;)
je souhaite mettre côte à côte 3 div, de gauche à droite: gallery - description - avis; je les ai imbriqué dans une div article
J'ai crée mon style avec CSS, cela s'affiche bien mais si je fais un zoom (crtl + souris) les div description et avis vont dans gallery
Je vous laisse mon code
#article {
position: absolute;
padding: 3em 0 0 0;
margin: 20px; auto;
width: 70%;
}
#gallery{
float: left;
width: 40%;
}
#description {
padding: 0 0 0 40px;
float: left;
width:35%;
color: #B1e100;
font-size: 1.8em;
background:url(search.png) no-repeat left top;
}
#avis {
float: left;
padding: 10px 0px 0 70px;;
width: 15%;
font-size: 1.8em;
color: #B1E100;
background:url(comment.png) no-repeat top left;
}
HTML:
<div id="article">
<div id="gallery">
Lorem ipsum
<div id="description">
Contenu: lorem ipsum
</div>
<div id="avis">Votre Avis </div>
Je vous remercie d'avance de m'éclairer ou de me corriger
Céline
ps: mon site n'est pas en ligne ;)
Configuration: Windows 7 / Firefox 3.5.8
6 réponses
-
Bonjour,
Vous étiez bien parti avec le positionnement en css:
position: absolute;
pour bien comprendre comment ça fonctionne:
http://html5.immo-scope.com/index.php?page=html5/miseEnPageAvecPositionnement
A+
-
Merci, j'essayerais cela dès que je peux
Pour répondre à boule97, j'ai réduis le code html pour poster ici et supprimer par erreur les deux divs, mais elles sont bien dans mon code source, sinon c'était bien vu ;) -
Dans chacune de tes DIV, tu dois mettre
position: relative; float: left;
-
Contributeur sécuritéBonjour
Compliqué de t'aider comme ça, mais d'après ce que tu as indiqué tes ID "article" et "gallery" ne sont pas fermées pour ton problème essaye de réduire le font-size des blocs qui posent problème
-
ça ne change rien le clear:both
sinon comme c'est un site qui s'intéresse à toute classe d'age confondue je pense au confort des yeux de certains internautes
merci -
Essaye clear:both; dans la div parent.
De toute manière je vois pas trop pourquoi se compliquer la vie, si ca marche bien. C'est plutôt au Design de s'accommoder à la résolution, et non à l'utilisateur de faire des Ctrl + (+) ou moins (-).
