ansaurus

Question

Problem with CSS layout with wrapping text

Answer 1

A:

set additional two styles on item class:

white-space: nowrap;
overflow: hidden;

That should do the trick.

Robert Koritnik 2010-05-19 15:24:56

thanks, that works but is there a way to keep the text and make item5 and item6 increase their height to match item4's instead?

Dan 2010-05-19 15:31:38

Unfortunately not without javascript or wrapping rows together.

Robert Koritnik 2010-05-19 15:44:36

Ok,I guess I'll use javascript to set the others elements height equal to the biggest one.

Dan 2010-05-19 15:46:44

You can find scripts for that on the net http://www.google.com/search?q=javascript+equal+height+columns

Robert Koritnik 2010-05-19 15:49:17

Answer 2

A:

You will need to specify a height to the .item. Because floating elements always set their height to the minimum they need. So, add the following line to your .item

height:<amount>px;

Kevin 2010-05-19 15:36:15

Answer 3

A:

The only solution I could think of without using JavaScript and without specifying a set height to your items, is to wrap every 3 items in a row.

<div id="grid">
   <div class="item-row">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
   </div>
   <div class="item-row">
      <div class="item">item4 with wrapping text</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
   </div>
   <div class="item-row">
      <div class="item">item7</div>
      <div class="item">item8</div>
      <div class="item">item9</div>
   </div>
</div>

You'd want to have overflow:hidden applied to item-row to contain the floated items.

Scott Christopherson 2010-05-19 15:40:11

ansaurus

tags:

views:

answers:

Problem with CSS layout with wrapping text

related questions