2 <div> sur la même ligne

[sdamain]

Bonjour a tous,

Je souhaire placer 2 <div> et que leur contenu s'affiche sur le même ligne, qu'il soit donc horizontal. Comment faire?

Merci.

 

[Jeromeb]

Alors je comprend pas trop mais un tableau serait sûrement l'idéal.

<table><td><div></div></td><td><div></div></td></table>
C'est ça que tu veux ?

 

[Gromka]

Avec display:inline ou float, je crois.

 

[macjee]

<div style='float:left'>contenu 1</div><div style='float:left;'>contenu 2</div>

Tu peux aussi fixer une largeur (width....)

A+

 

[BadProcESs]

<div style='float:left'>contenu 1</div><div style='float:left;'>contenu 2</div>

Je dirai plutôt right, mais je pense que chacun aura corrigé

 

[sdamain]

Super, ca fonctionne très bien.
Un grand merci à tous.

 

[Juxener]

<div style='float:left'>contenu 1</div><div style='float:left;'>contenu 2</div>

Je dirai plutôt right, mais je pense que chacun aura corrigé

De ttes manières il sert à rien, le float:left de l'autre suffit

 

[milkiway]

<div style='float:left'>contenu 1</div><div style='float:left;'>contenu 2</div>

Je dirai plutôt right, mais je pense que chacun aura corrigé

left est plus approprié
pourquoi utiliser un div si c'est pour lui appliquer un effet inline ou pour ne pas l'afficher en bloc ?

 

[macjee]

De ttes manières il sert à rien, le float:left de l'autre suffit

Au lieu de critiquer vous feriez mieux de lui répondre ! :roll:

 

[jcaron]

Je souhaire placer 2 <div> et que leur contenu s'affiche sur le même ligne, qu'il soit donc horizontal. Comment faire?

Ca peut dépendre beaucoup de l'effet visuel recherché. Si c'est pour obtenir l'équivalent d'une table, i.e. deux DIV qui auront la même hauteur égale à la plus grande des deux, dynamiquement, ce n'est malheureusement pas possible de façon portable, à ma connaissance (c'est pour ça que tout le monde continue à utiliser des tables partout pour faire du formatage alors que ce n'est vraiment pas fait pour ça).

Sinon il y a pas mal de choses à changer sur l'un ou l'autre bloc, avec les propriétés display (block/inline), position, float et probablement quelques autres. Attention cependant à la compatibilité: on touche à des choses qui sont interprétées de façon souvent incorrecte par de nombreux browsers, et en tous cas pas toujours de façon identique! Ne pas oublier de tester sur quelques browsers différents pour vérifier que le résultat obtenu correspond à l'effet recherché!

Jacques.

 

[Juxener]

Béh juste :
<div style="float: left"> hhh </div> <div> hhhhhh </div>
suffit !

C'est ce que j'utilise ici :
http://www.jsand.net

Le seul pb (qui pr moi est le seul vrai pb de CSS), c que si la page de droite est plus petite que le menu, la barre du dessous fonce sur le menu pour les autres nav que IE...
A voir avec min-height pr momo.

 

[juliofromlille]

Si c'est pour forcer sur la même igne, le SPAN est plus d'actualité !

 

[Juxener]

Un span pour une mise en page ^^ ?
Le span prendra difficilement cette fonction dans la mesure où ce n'est même pas un élément de block :d !

 

[juliofromlille]

Je souhaire placer 2 <div> et que leur contenu s'affiche sur le même ligne, qu'il soit donc horizontal. Comment faire?.

justement, la problématique c'est qu'il soient sur la même ligne, alors dans ce cas là c'est le SPAN plus que le DIV.

 

[Juxener]

Relis le topic de départ, il veut justement que ce soit sur la même ligne !

Par défaut, deux div côté à côté s'affichent l'un en dessous de l'autre, ils ont des retours à la ligne automatique... !

 

[rituel]

display:inline :wink:

 

[yannouk]

non, surtout pas display:inline ...
je m'explique:
display:inhline, ca ne fait que transformer un div en span .... Avec tout ce que ca implique, a savoir que le span s'adapte en taille au contenu, on ne peut lui specifier une largeur fixe.
Donc c'est bien une balise div qu'il faut utiliser si on veut 2 blocs avec largeur fixes et cote a cote...
Donc l'un des premiers exemlples donnés est le bon: 2 div en float left ... pas right, c'est bel et bien left...Si non t'as aucune garantie quant a l'espacement entre tes 2 divs....
alors pour resumer: 2 divs en float left qui pourront se voir assigner une largeur precise, et qui pourront etre espacés au choix grace a la propriété margin.
A+++

 

[sdamain]

J'ai utilisé cette solution de départ, cela fonctionne parfaitement bien.
Merci encore.