Positionnement div/css
gabbermaniac
Messages postés
147
Statut
Membre
-
mpmp93 Messages postés 2931 Date d'inscription Statut Membre Dernière intervention -
mpmp93 Messages postés 2931 Date d'inscription Statut Membre Dernière intervention -
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
-
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 (-). -
ç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 -
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
-
Dans chacune de tes DIV, tu dois mettre
position: relative; float: left;
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
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 ;) -
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+
