Mise en place de colonnes

**Olivier Regnier** · 26/06/2008, 20h37

Bonjour

Je dispose de 4 colonnes mais lorsque je place dans la première un peu plus de texte, celui-ci déborde sur celle du dessous.

Voici le code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<div>
 <h1>Section 1</h1>
  <div class="colonne1">
   <img src="img/test.png" width="48" height="48" />
   <h2>Titre</h2>
   <p>texte</p>
  </div>
  <div class="colonne2">
   <img src="img/test.png" width="48" height="48" />
   <h2>titre</h2>
   <p>texte</p>
  </div>
</div>
 
<div>
 <h1>Section 2</h1>
  <div class="colonne1">
   <img src="img/test.png" width="48" height="48" />
   <h2>titre</h2>
   <p>text</p>
  </div>
  <div class="colonne2">
   <img src="img/test.png" width="48" height="48" />
   <h2>titre</h2>
   <p>texte</p>
  </div>
</div>

Voici le code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.colonne1 {
    width:320px;
    height:80px;
    float:left;
}
 
.colonne2 {
    width:320px;
    height:80px;
    float:right;
}

Un coup de main s'il vous plaît ?

Merci d'avance

**Bovino** · 26/06/2008, 21h48

Etant donné que tu as donné une hauteur à ta div, elle prendra exactement cet espace, et la suivante viendra prendre sa place en-dessous.
Cependant, que se passe-t-il si le texte ne rentre pas dans cet espace (comme dans ton cas) ? C'est la propriété overflow qui gère ça.
Elle vaut par défaut 'visible', ce que tu obtiens : le texte déborde.
Tu peux aussi lui donner comme valeur hidden (le texte en trop ne sera pas visible) ou scroll (ascenseur dans tous les cas, attention, il prend de la place !) ou auto (ascenseur si besoin)

**Olivier Regnier** · 26/06/2008, 23h11

La propriété overflow ne m'intéresse pas car je souhaite voir tout le texte sans qu'il déborde sur la colonne du dessous. Il faudrait que les deux bloc div soient indépendants