Text doesn't wrap, layout breaks instead

Question

I have a collection of divs as strings that can be of variable width since they are inside a resizable container. The div contains the text in which I want to have a padding indent. This works fine, except that in this example the first line is squeezed under the red mark when the width is too low.

When .wrapper is 450 pixels, everything is displayed correctly. When it is 250px, you can see how everything breaks. I always want the range of longtextthatwraps be on the same line as the red label.

Here's a live example / fiddle , and the source is as follows:

HMTL (no spaces between .prefix and .part , but for readability ...):

 <div class="wrapper"> <div class="padded excludes"> <div class="parts first"> <span class="prefix">Quisques:&nbsp;</span> <span class="segment level-0"> <span class="part text">longtextthatwraps incorrectly (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span> </span> </div> <div class="parts"> <span class="segment level-0"> <span class="part text">consectetur adipiscing (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span> </span> </div> <div class="parts"> <span class="segment level-0"> <span class="part text">quisque non mauris sed:</span> </span> </div> <div class="parts"> <span class="segment level-1"> <span class="part list-item">hendrerit (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span> </span> </div> <div class="parts"> <span class="segment level-1"> <span class="part list-item">non mauris sed (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span> </span> </div> <div class="parts"> <span class="segment level-1"> <span class="part list-item">lorem ipsum dolor (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span> </span> </div> </div> </div> 

CSS

 .wrapper { width: 250px; background: #c3dff5; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; } .padded { padding-left: 20px; } .parts { padding-left: 80px; } .parts.first { padding-left: 0; } .prefix { color: #D12; font-weight: bold; min-width: 80px; display: inline-block; } .level-0,.level-1 { display: inline-block; padding-left: 5px; text-indent: -5px; outline: 1px dotted #f0f; } .level-1 { padding-left: 20px; } 

Help rate

Answer 1

What if you remove the first class, move span.prefix from div.parts and add position: absolute to it?

Jsfiddle

Update (css only)

To solve only css, remove the first class, give position: absolute to span.prefix and specify the left position, for example left: 25px . This seems to work in IE7 as well.

Updated JsFiddle

Answer 2

Hmmm, I believe I have a CSS solution for your problem, although I'm sure there are other ways to find the behavior you are looking for.

For .prefix I gave the style:

 .prefix { display: table-cell; } 

And then I added another definition:

 .parts.first .level-0 { display:table-cell; } 

Hope this is what you are looking for! Here's an updated JSFiddle to show you what it is. If this is not your goal, let me know and I will be happy to help you further!

Answer 3

Use position:absolute; and margin-left .

 .first > .prefix{ position: absolute; left:10px; } .first > .level-0{ margin-left:80px; } 

Lines 17-24 this violin

Answer 4

I created a simplified version that will float in each section, right and left, and gives them a percentage unit. Try adding indentation levels.

 <div class="wrapper"> <div class="left"> <span class="red">Quisques: </span> </div> <div class="right"> <span class="level">consectetur adipiscing (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span> <span class="level">quisque non mauris sed:</span> <span class="level">consectetur adipiscing (0000-0000)</span> </div> </div> 

CSS

  .wrapper { width: 250px; background: #C3DFF5; overflow: hidden; padding: 12px; } .red { color: red; font-weight: bold; } .left { float: left; width: 30%; } .right { float: right; width: 70%; } .level { display: block; outline: 1px dotted #FF00FF; } 

Live demo http://jsbin.com/apaqop/1/

Answer 5

Please view the demo.

You need to add CSS like

  .wrapper { width: auto; background: #c3dff5; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; min-width:250px; float:left; }