Disposer trois div cote à cote dans div corps

Résolu/Fermé
GS - 6 avril 2010 à 13:51
 GS - 7 avril 2010 à 15:12
Bonjour,
je suis en train de créer mon site internet, et sur l'une de mes pages je souhaiterais disposer 3 block (composé d'un titre et d'une liste de caractéristiques), les uns à coté des autres pour mettre en avant 3 packages que je propose dans mon entreprise; en gros cela pourrait se faire facilement avec un tableau de 3 de 3 colonne et 2 ligne, mais les tableaux c'est un peu du bricolage d'aprés ce qu'on dit ....
Auriez vous une solution à me proposer, j'ai fouiller dans les tutos sur les boites flottantes , ect... , mais rien ne correspond à ce que je veux faire

9 réponses

xav3601 Messages postés 3288 Date d'inscription lundi 10 novembre 2008 Statut Membre Dernière intervention 2 mars 2016 311
Modifié par xav3601 le 6/04/2010 à 16:03
Personnelement je n'aime pas la gestion de la mise en page avec les floats.
Quand je dois mettre 3 div côté à côte j'utilise juste les % et les décalage par rapport au bord de la fenêtre et ca marche très bien ;-)
La culture c'est comme la confiture, moins en a plus on l'étale!
1
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 056
6 avril 2010 à 13:55
Salut !

Effectivement, les flotants est une bonne solution
Il suffit de faire les 3 blocs. L'un en floatant à gauche, l'autre à droite et la partie du milieu en normal, avec des marges sur les coté.

La marge de gauche laisse la place pour la colonne de gauche et idem à droite.

Sinon, aurais-tu un croquis rapide, ne serais-ce pour que l'on puisse s'imaginer ce que tu veux. Un simple truc fait avec paint suffira.
0
zecka Messages postés 115 Date d'inscription samedi 16 février 2008 Statut Membre Dernière intervention 2 décembre 2015 28
6 avril 2010 à 13:56
Bein avec les boite flottantes tu peu mettre 3 div l'un a coté de l'autre,... je ne comprend pas trop ton problême.
0
mon pb c que je débute et que quand j'ai essayé les float ça me décallait ma div footer ...
0
merci pour vos réponses rapides,
voilà une image pour vous donner une id de ce que je voudrais faire :
[url=https://www.hiboox.fr/][img]http://free0.hiboox.com/images/1410/feaac250739be3e5886d21ad33a572a6.png[/img][/url]
0

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

Posez votre question
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 056
6 avril 2010 à 14:13
Oui et les flottants permettent de faire ça, y'a pas de doute.

Il suffit simplement de faire gaffe : les blocs flottants doivent être mis avant les bloc non flotants lors de l'écriture du code HTML.

Comme Zecka, je ne vois pas trop le problème.
0
bonjour quand je mets les block flottant un en float left, l'autre en float none et le dernier en float rigth, ça me décalle toute ma div footer.
Voilà mon code html:

<!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" xml:lang="fr" >
<head>
<link rel="icon" type="image/png" href="favicon.png" />
<title>SGcom Tarifs</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
<link href="styles/monstyle.css" rel="stylesheet" type="text/css" />
<link href="styles/styletarifs.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="conteneur">
<div id="header"></div>

<div id="menu">
<ul id="bouton">
<li id="accueil"><a href="index.html">Accueil</a></li>
<li id="services"><a href="services.html">services</a></li>
<li id="tarifs"><a href="tarifs.html">tarifs</a></li>
<li id="contact"><a href="contact.html">contact</a></li>
</ul>
</div> <!-- FIN DIV "menu" -->
<div id= "cadrehaut"></div>
<div id="corps">
<div id="pack1"></div>
<div id="pack2"></div>
<div id="pack3"></div>
</div>
<!-- FIN DIV "corps" -->

<div id="footer">
<ul><li><a href="index.html">Accueil</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="tarifs.html">Tarifs</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="mentionleg.html">Mentions légales</a></li></ul>
</div> <!-- FIN DIV "footer" -->
</div> <!-- FIN DIV "conteneur" -->
</body>
</html>


et voilà mon fichier css

#pack1 { background-color:#666666; float: left; width: 250px;
}
#pack2 { background-color: #FF0000; float: none; width: 250px;
}
#pack3 { background-color: #CCCC00; float: right; width: 250px;
}

Pouvez me donner quelques indications, je debute en css donc c'est un peu la galère...

Merci d'avance
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
6 avril 2010 à 15:51
Mettre un clear:both au #footer
0
Merci, en fait un paragaphe suit les float donc j'ai affecté le clear both à ce dernier et tout fonctionne nickel...
Merci à tous,
Sinon avez vous une idée pour faire les coins de mes boites arrondi,
Merci A +
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 7/04/2010 à 14:08
0
Merci
0