Disposer trois div cote à cote dans div corps [Résolu/Fermé]

Signaler
-
 GS -
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

Réponse 1 / 9
Messages postés
3288
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
2 mars 2016
 300
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
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Réponse 2 / 9
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
 1 024
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.
Réponse 3 / 9
Messages postés
115
Date d'inscription
samedi 16 février 2008
Statut
Membre
Dernière intervention
2 décembre 2015
 25
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.
Signaler

mon pb c que je débute et que quand j'ai essayé les float ça me décallait ma div footer ...
Réponse 4 / 9

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]
Réponse 5 / 9
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
 1 024
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.
Réponse 6 / 9

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
Réponse 7 / 9
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
 208
Mettre un clear:both au #footer
Réponse 8 / 9

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 +
Signaler
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
 208
4 méthodes pour faire des coins arrondis
Réponse 9 / 9

Merci
Posez votre question