Text doesn't wrap, breaks layout instead - html

Question

I have a collection of divs as rows that can be variable width as they are inside a resizable container. The div contains text that I want to have a hanging indent. This works fine except in this example the first line is pushed underneath the red label when the width is too low.
When .wrapper is 450px everything is displayed properly. When it's 250px you can see how things break. I always want the longtextthatwraps span to be on the same line as the red label.
Here's a live example/fiddle and the source is as follows:
HMTL (there is no whitespace between .prefix and .part but for readability...):
<div class="wrapper">
<div class="padded excludes">
<div class="parts first">
<span class="prefix">Quisques: </span>
<span class="segment level-0">
<span class="part text">longtextthatwraps incorrectly (0000-0000)</span>
</span>
</div>
<div class="parts">
<span class="segment level-0">
<span class="part text">consectetur adipiscing (0000-0000)</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 (0000-0000)</span>
</span>
</div>
<div class="parts">
<span class="segment level-1">
<span class="part list-item">non mauris sed (0000-0000)</span>
</span>
</div>
<div class="parts">
<span class="segment level-1">
<span class="part list-item">lorem ipsum dolor (0000-0000)</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 appreciated

Answer 1

Hmmm, I believe I have a CSS solution to your problem, though I'm sure there are other ways out there to get the behaviour you're 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;
}
I hope this is what you're looking for! Here's the updated JSFiddle to show you what it results in. If this isn't your objective, please let me know and I'll be happy to help you further!

Answer 2

What if you remove the first class, move the span.prefix out of div.parts and add a position: absolute to it?
JsFiddle
Update (css only)
For a css-only solution remove the first class, give a position: absolute to span.prefix and specify left position, for example left: 25px. This seems to work in IE7, too.
Updated JsFiddle

Answer 3

Use position:absolute; and margin-left.
.first > .prefix{
position: absolute;
left:10px;
}
.first > .level-0{
margin-left:80px;
}
Lines 17-24 of this fiddle

Answer 4

I created a simplified version that will float each section, one to right and section to left and gives them a percent unit. Try to add your indent levels.
<div class="wrapper">
<div class="left">
<span class="red">Quisques: </span>
</div>
<div class="right">
<span class="level">consectetur adipiscing (0000-0000)</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 see this Demo
You have to add in CSS like
.wrapper {
width: auto;
background: #c3dff5;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
min-width:250px;
float:left;
}