18081 sujets

Questions générales et questions de débutants

Texte sur 3 colonnes - <div>

Bonjour,

Je souhaite afficher du texte sur 3 colonnes aussi j'ai essayé en utilisant display:inline et float, l'un avec l'autre, l'un sans l'autre, etc.

Je ne parviens pas à 3 colonnes alignées et affichées de la même manière sous IE et FF.

Voici une de mes tentatives :
<div class="colonne">
        <h2>Parsi </h2>
        <p>xxxxx<br />
        xxxxxx<br />
        xxxxxxxxxx</p>
        <p>xxxxxxx<br />
        xxxxxxxxxx</p>
		</div>
		<div class"colonne">
        <h2>Anneco </h2>
        <p>xxxxx<br />
        xxxxxx<br />
        xxxxxxxxxx</p>
        <p>xxxxxxx<br />
        xxxxxxxxxx</p>
		</div>
		<div class="colonne">
        <h2>Lozane </h2>
        <p>xxxxx<br />
        xxxxxx<br />
        xxxxxxxxxx</p>
        <p>xxxxxxx<br />
        xxxxxxxxxx</p>
		</div>


div.colonne {width:146px; display:inline;}


Merci de votre aide !
Modifié par karnabal (18 Jun 2006 - 14:38)
Salut,

Tu peux essayer un truc dans le genre :

<style>
  #col1, #col2, #col3 {width: 146px; float:left;}
  </style>
  </head>
  <body>
<div id="col1">
        <h2>Parsi </h2>
        <p>xxxxx<br />
        xxxxxx<br />
        xxxxxxxxxx</p>
        <p>xxxxxxx<br />
        xxxxxxxxxx</p>
		</div><!--fin id="col1">-->

		<div id="col2">
        <h2>Anneco </h2>
        <p>xxxxx<br />
        xxxxxx<br />
        xxxxxxxxxx</p>
        <p>xxxxxxx<br />
        xxxxxxxxxx</p>
		</div><!--fin id="col2">-->

		<div id="col3">
        <h2>Lozane </h2>
        <p>xxxxx<br />
        xxxxxx<br />
        xxxxxxxxxx</p>
        <p>xxxxxxx<br />
        xxxxxxxxxx</p>
		</div><!--fin id="col3">-->
Merci de vos réponses.

Pourquoi #col1, #col2, #col3, ne peut-on pas faire plutôt - dans le cas qui nous concerne - .col ?
Ben comme les colonnes ont les mêmes valeurs autant utiliser une classe, il me semble que c'est plus approprié. Smiley smile
Oui bien sur, mais j'ai pris un bout de code d'un truc que j'ai fait en modifiant un peu, et la les colonnes n'avaient pas les mêmes attributs. Et j'ai pas remplacé.

Gomenasaaaaaaï
Sujet clos
Aller à