Aligning multiple lines of text with label, with same indentation

Question

I have a fairly simple problem and I cant find the right solution anywhere.

I have a label, with text next to it that will wrap to the next line. I want the wrapped text to be indented all the same. But I want the first line of text to be aligned with the label. Both inline-block and float simply cause the text to appear on the next line.

** The label and the line of text are of unknown widths

What I want:

 .item div { display: inline-block; } .label { float: left; } .text { float: left; } 

 <div class="item"> <div class="label">Label:</div> <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div> </div> 

Answer 1

You need to use positioning for this case. This is a case of fixed-fluid:

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

Or

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.

Snippet

 .parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;} .parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;} .parent .fluid {background-color: #f99;} 

 <div class="parent"> <div class="fixed">Fixed</div> <div class="fluid">Fluid</div> </div> <div class="parent"> <div class="fixed">Fixed</div> <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div> </div> 

Working Snippet

 .parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;} .parent .fixed {position: absolute; left: 5px; width: 90px;} .parent .fluid {} 

 <div class="parent"> <div class="fixed"><strong>Label</strong></div> <div class="fluid">The Text</div> </div> <div class="parent"> <div class="fixed"><strong>Label</strong></div> <div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div> </div> 

Answer 2

You can use display: table; and display: table-cell;

 .item { display: table; } .label { display: table-cell; } .text { display: table-cell; } 

 <div class="item"> <div class="label">Label:</div> <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div> </div> 

Answer 3

You should be able to acheive this using inline-block. Check this out

 div.item { width: 500px; } .label { float: left; display: inline-block; width:50px; } .text { float: left; display: inline-block; width: 450px; } 

 <div class="item"> <div class="label"> <strong>Label:</strong> </div> <div class="text"> Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block. </div> <div style="clear:both;"></div> </div> 

Answer 4

 .item div { display: inline-block; } .label { float: left; width:15%; } .text { float: right; width:85%; } 

 <div class="item"> <div class="label">Label:</div> <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div> </div>