Positionnement div/css

gabbermaniac Messages postés 137 Date d'inscription   Statut Membre Dernière intervention   -  
mpmp93 Messages postés 6648 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 ;)

6 réponses

LelLex Messages postés 1628 Date d'inscription   Statut Membre Dernière intervention   112
 
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 (-).
0
Pierre
 
Il faudrait que je rajoute juste :
.clear
{
clear: both;
}


et ça marcherais? Ou bien il faut faire d'autres modifs?
Merci
0
gabbermaniac Messages postés 137 Date d'inscription   Statut Membre Dernière intervention   12
 
ç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
0
boule97 Messages postés 22974 Date d'inscription   Statut Contributeur sécurité Dernière intervention   2 583
 
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
0
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
Dans chacune de tes DIV, tu dois mettre
position: relative;
float: left;
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
gabbermaniac Messages postés 137 Date d'inscription   Statut Membre Dernière intervention   12
 
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 ;)
0
mpmp93 Messages postés 6648 Date d'inscription   Statut Membre Dernière intervention   1 340
 
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+
0