2 div côte à côte qui s'adaptent au contenu

poupilou · 24 Juillet 2012

Salut à tous travailleurs juilletiste,

Est-il possible de placer en css 2 div l'une à côté de l'autre et que chaque div s'adapte à son contenu ?

On peut facilement placer 2 div l'une à côte de l'autre avec ce code :

Code:

#bloc1{float:left;width:47%;margin:5px;padding:5px;}
#bloc2{float:left;width:47%;margin:5px;padding:5px;}

Mais je voudrais éviter d'indiquer une quelconque largeur de div (enlever le "width" dans le css) afin que chaque div s'adapte automatiquement à son contenu, comment faire ?

Merci pour vos réponses.

nza2k · 24 Juillet 2012

C'est assez moche d'en venir là, mais tu peux peut-être arriver à ce que tu veux en utilisant un bon vieux tableau html ?

poupilou · 24 Juillet 2012

C'est exactement ce que j'étais en train de me dire

mais c'est quand même dingue que l'on ne puisse pas faire une tâche aussi basique en css... quand on voit ce que l'on arrive à faire avec le css (texte shadows, background en dégradé, etc...), on a l'impression de revenir à l'âge de pierre avec le tableau html :mrgreen: finalement il n'est pas si mal ce tableau html je vais continuer de l'utiliser...

mrpat · 24 Juillet 2012

Impossible de répondre sans savoir #1) quel est la nature du contenu de chaque div #2) dans quel mesure souhaites tu conserver le controle sur le design de ces 2 div (et de ce qu'il y autour)...

Parce qu'après, des soluces yen a, mais ca risque d'être moche....

poupilou · 24 Juillet 2012

Il va y avoir du texte et des images dans ces div, par exemple une image dans la div de gauche et du texte dans la droite (ou l'inverse), mais comme ces images n'ont jamais les mêmes dimensions, ce sera dur de calibrer par avance (dans le css) la div qui recevra l'image, d'ou mon souhait que chaque div s'adapte automatiquement à son contenu.

Ces 2 div seraient dans une div que j'appelle "milieu" et dans laquelle s'affiche le texte de toutes mes pages, c'est la partie centrale de mon site.

Il faudrait faire comme avec ce modèle de tableau :

Code:

<table border="0" cellpadding="2" cellspacing="1" width="100%" align="center">
       <tr>
           <td valign="top"><img src"mon_image.jpg" alt="" width="100" height="150" border="0" /></td>
           <td valign="top">Mon texte ici, qui peut être plus ou moins long....</td>
       </tr>
</table>

Pour l'instant j'utilise ce tableau mais si avec le css on peut obtenir le même résultat sans que ce soit pas trop compliqué à mettre en place, je suis preneur :mrgreen:

mrpat · 24 Juillet 2012

pourquoi ne pas essayer l'attribut display:table ou display:table-cell...
ya un article sur alsacreation qui permet de cerner les bases de ce principe : http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-gr ... splay.html

poupilou · 24 Juillet 2012

Merci mrpat, je ne connaissais pas cette technique css, assez intéressante d'ailleurs.... mais apparemment elle n'est pas comptabible IE7 et faire l'impasse d'IE6 et IE7 à l'heure actuelle c'est pas trop recommandé, voir déconseillé :?

rikew · 24 Juillet 2012

Je n'ai plus souvenir du problème exacte mais il m'ai arrivé de devoir recourir au bon vieux tab html sur site full css

bproductiv · 25 Juillet 2012

et si tu te contente de mettre un max-width:57% avec un overflow:hidden (et à la limite un word-warp) normalement ca fonctionne parfaitement.
Des tableaux..pfuuu n'importe quoi. On peut TOUT faire en css, suffit de savoir comment.

Leonick · 25 Juillet 2012

poupilou a dit:
C'est exactement ce que j'étais en train de me dire mais c'est quand même dingue que l'on ne puisse pas faire une tâche aussi basique en css...

pas si basique que ça, car quand tu veux faire du multi colonne dans un traitement de textes, tu es bien obligé de paramétrer les largeurs de colonnes.
De plus, si tes div sont encapsulées dans une div de 1000 px de large, mais que dans chacune de tes div tu souhaite y afficher une image de 550 px, que crois-tu qu'il va se passer ?

mrpat · 25 Juillet 2012

si tu ne connais ni la largeur de tes img, ni la longueur max de tes textes, tu es dans l'impasse, il faudra donner un width à tes div. La soluce de bproductiv peut marcher mai bon, tu voulais pas de width alors quid du max-width ou min-width ou autre ?

Quant aux tableaux, faut arréter de leur cracher dessus. Obsolétes pour les mises en pages complexes, ils restent tout à fait viable pour des données tabulaires (même si moi aussi, pour une question de maintenance et lisibilité du code, je préfére les éviter). La question étant, est ce que les img+text que tu manipules sont des données tabulaires ?

Leonick · 25 Juillet 2012

mrpat a dit:
Obsolètes pour les mises en pages complexes, ils restent tout à fait viable pour des données tabulaires (même si moi aussi, pour une question de maintenance et lisibilité du code, je préfére les éviter).

ça n'est pas qu'ils soient viables, c'est plutôt qu'ils sont justement fait pour cela.
Si on a juste 2 colonnes de données, un mot - une définition, il est plus adapté d'utiliser des <dl><dt><dd>, au delà de 2 colonnes, il faut utiliser les tableaux.

mrpat · 25 Juillet 2012

@leonick, tu joues sur les mots

mais je te rejoins à 100%

poupilou · 25 Juillet 2012

Quel code css faut-il mettre pour tester l'idée de bproductiv avec un max-width:57% avec un overflow:hidden j'ai pas tout pigé là ?

J'ai essayé ça :

Code:

#bloc1{float:left;max-width:57%;overflow:hidden;margin:5px;background-color:white;}
#bloc2{float:left;max-width:43%;overflow:hidden;margin:5px;background-color:white;}

Mais ça ne marche pas

bproductiv · 25 Juillet 2012

tu est a 100% (57 + 43) donc tes marges vont tout foirer.

poupilou · 25 Juillet 2012

J'ai essayé ce code mais ça ne fonctionne pas vraiment bien

Code:

<html>
<head>
<style type="text/css">
body{font-family:Arial,"trebuchet ms",sans-serif;font-size:100%;}
#milieu{width:1000px;margin:auto;border:1px solid #A8A8A8;background-color:white;}
#bloc1{float:left;max-width:47%;overflow:hidden;margin:5px;padding:5px;border-right:1px dashed #A8A8A8;}
#bloc2{float:left;max-width:50%;overflow:hidden;margin:5px;padding:5px;}
</style>
</head>
<body>
<div id="milieu">
<div id="bloc1">
<img src="http://www.enmodeluxe.com/wordpress/wp-content/uploads/2010/01/aston-martin-carbon-black-edition1.jpg" alt="" width="240" height="180" border="0" />
</div>
<div id="bloc2">
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
</div>
<br><br><br>
<div id="bloc1">
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
</div>
<div id="bloc2">
<img src="http://www.enmodeluxe.com/wordpress/wp-content/uploads/2010/01/aston-martin-carbon-black-edition1.jpg" alt="" width="120" height="90" border="0" />
</div>

</div>
</body>
</html>

J'ai une div de 1000px centrée dans la page dans laquelle je place 2 autres div (bloc1 et bloc2) dans lequel je met du texte et des images (de différentes dimensions), je veux que le texte et l'image remplisse toute la largeur des div (bloc1 ou bloc2) ainsi que la div de 1000px et que ce texte et image s'adapte donc au contenu des 2 div (bloc1 et bloc2) :?

Pour infos : le max-width n'est pas reconnu par IE6 :!:

bproductiv · 25 Juillet 2012

tu est a 100% + 10px donc ca flotte plus, normal.

poupilou · 25 Juillet 2012

C'est pas une question que ça ne flotte plus mais c'est plus une question que le contenu texte et/ou image ne remplissent pas les 2 div bloc sur toute la largeur de 1000px, essaie le code ci-dessus que j'ai donné et tu verras le problème.

Je pense qu'en mettant un max-width tu obliges cette div à ne pas dépasser la valeur du max-width, or je veux que ça flotte réellement librement en fonction des dimensions des contenus de chaque div (texte et image)

bproductiv · 25 Juillet 2012

Début de réponse à peaufiner

Code:

<html>
<head>
<style type="text/css">
body{font-family:Arial,"trebuchet ms",sans-serif;font-size:100%;}
#milieu{width:1000px;margin:auto;border:1px solid #A8A8A8;background-color:white;}
.bloc1{float:left;overflow:hidden;padding:5px;border:1px dashed #A8A8A8;}
.bloc2{overflow:hidden;padding:5px;border1px solid #f00;}
</style>
</head>
<body>
<div id="milieu">
<div class="bloc1">
<img src="http://www.enmodeluxe.com/wordpress/wp-content/uploads/2010/01/aston-martin-carbon-black-edition1.jpg" alt="" width="240" height="180" border="0" />
<br style="clear:both" />
</div>
<div class="bloc2">
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<br style="clear:both" />
</div>
<div class="bloc1">
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
</div>
<div class="bloc2">
<img src="http://www.enmodeluxe.com/wordpress/wp-content/uploads/2010/01/aston-martin-carbon-black-edition1.jpg" alt="" width="120" height="90" border="0" />
<br style="clear:both" />
</div>
<br style="clear:both" />
</div>
</body>
</html>

poupilou · 25 Juillet 2012

D'accord pour le premier bloc1 et bloc2 ils s'affichent correctement mais pas le deuxième bloc1 et bloc2 : l'image de la voiture du deuxième bloc2 passe en dessous du deuxième bloc1, ils ne sont pas à côtés !

bproductiv · 25 Juillet 2012

Va faire un tour sur alsacréation

poupilou · 25 Juillet 2012

Pour y chercher quoi ?

Parce que pour faire simple et fonctionnel il y a ça :

Code:

<table border="0" cellpadding="2" cellspacing="1" width="100%" align="center">
       <tr>
           <td valign="top"><img src="http://www.enmodeluxe.com/wordpress/wp-content/uploads/2010/01/aston-martin-carbon-black-edition1.jpg" alt="" width="240" height="180" border="0" /></td>
           <td valign="top"><p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici</p>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p></td>
       </tr>
</table>

Je crois que dans certain cas le css n'est pas la solution idéale :wink: je vais utiliser le bon vieux tableau html

Amauri · 25 Juillet 2012

Sans spécifier de "width" tu n'arriveras pas à faire tenir 2 div côte à côte.

Une autre solution, plus propre que les tableaux amha : http://jsfiddle.net/6MFjH/

bproductiv · 25 Juillet 2012

A toi de voir..moi je chercherai un peu.

poupilou · 25 Juillet 2012

Amauri a dit:
Sans spécifier de "width" tu n'arriveras pas à faire tenir 2 div côte à côte.

Je suis d'accord avec toi, on y arrive avec les tableau html en spécifiant uniquement un width="100%" pour la table et rien dans les <td> mais en css si on ne spécifie pas le width ça marchera pas.

Amauri a dit:
Une autre solution, plus propre que les tableaux amha : http://jsfiddle.net/6MFjH/

Pas mal cette solution, je crois que je vais opter pour ta solution