largeur: problème automatique de divs flottant (IE6)

Question

J'ai besoin que le texte de ces divs flottants soit dans une ligne. Dans Firefox cela fonctionne bien. En IE6 il semble foiré:

screen

Je ne peux pas définir une largeur explicite sur ces derniers. Réglage de la hauteur n'aide pas. Des idées s'il vous plaît?

Le code HTML:

<div id="wraper"> 

<div class="draggable"> 
    <p>a main road with fast-travelling traffic</p> 
</div> 

<div class="draggable"> 
    <p>a very large bird, not able to fly</p> 
</div> 

<div class="draggable"> 
    <p>very important</p> 
</div> 

<div class="draggable"> 
    <p>a plant with white berries that feeds on trees</p> 
</div> 

<div class="draggable"> 
    <p>breakfast and lunch combined in one meal</p> 
</div> 

<div class="draggable"> 
    <p>a part of a room used for cooking</p> 
</div> 

et le CSS:

#wraper{ 
background: #FAFAFA; 
border: 1px solid #333; 
margin: 0 auto; 
overflow: hidden; 
padding: 20px; 
width: 500px; 
} 
.draggable{ 
background: #F1F7FF; 
border: 1px solid #CAE1FF; 
display: inline; 
float: left; 
margin: 0 5px 5px 0; 
padding: 3px; 
position: relative; 
width: auto; 
height: auto; 
} 
.draggable p{ 
margin: 0; 
padding: 0; 
} 

Answer 1

.draggable p { 
    white-space: nowrap; 
} 

Vous ne devriez pas avoir la auto explicite largeur/hauteur, qui est la valeur par défaut. Normalement, vous n'utilisez pas display: inline, car un flotteur n'est jamais intégré, mais je suppose que c'est une solution de contournement pour un bug IE?

Answer 2

1. Essayez d'ajouter white-space:nowrap; à la classe .draggable.

2. Si cela échoue et que vous souhaitez un saut de ligne à un certain point, ajoutez clear:left; à la première instance de .draggable sur chaque ligne.

vous pouvez utiliser l'héritage BTW, perdre la classe .draggable et div et le style que la balise p (BTW wraper = wrapper?):

#wrapper p { rules here }