width:auto floating divs problem (IE6)

Question

I need the text in these floating divs to be in one line. In Firefox this works ok. In IE6 it looks messed up:

screen

I cannot set an explicit width on these. Setting height does not help. Any ideas please?

The 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>

and the 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;
}

You shouldn't need the explicit auto width/height, that's the default. You normally wouldn't use display: inline either as a float is never inline, but I guess this is a workaround for an IE bug?

Answer 2

1. Try adding white-space:nowrap; to the .draggable class.

2. If that fails, and you want a line break at a certain point, add clear:left; to the first instance of .draggable on each line.

BTW you could use inheritance, lose the .draggable class and div (BTW wraper = wrapper?) and just style the p tag:

#wrapper p { rules here }

Answer 3

Thank you! white-space:nowrap worked great!