Block element text overflow problem in IE7

Question

I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.

Here's how it looks in IE7 (wrong): Link (cannot post images as a new user)

In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user

Don't mind the element order as it's random. Elements are dynamically generated by jQuery.

HTML code:

<div class="ui-sortable" id="area">
  <span class="object">: </span>
  <span class="object">1998- </span>
  <span class="object">ISSN 1392-4087</span>
  <span class="object">, </span>
  <span class="object">. </span>
  <span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">Vilnius</span>
  <span class="object">1998- </span>
  <span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>

CSS code (irrelevant info like fonts & colors removed):

#area {
  min-height: 160px;
  width: 760px;
}
.object {
  display: block;
  float: left;
  text-align: center;
  width: auto;
}

Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?

Answer 1

You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.

Why not leave it inline? If you need a box, add padding:

span.object { padding: 6px; }

Edit: if you don't want them to break across lines add:

span.object { white-space: nowrap; }

Far easier than getting floats to do this particular task.

Answer 2

I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.

See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg