Question

Firstly, sorry about the question title, it may not be very descriptive for my actually requirements (which is one reason why I can’t find a solution to this with a Google search – I don’t know what to search for)

I am trying to layout some “label text” next to some “value text” but want to keep the value text in line even when it needs to span multiple lines.

Here is an example of the desired result…

Label 1        Value 1
Label 2        Value 2
Label 3        Value 3 is much longer
               so it needs to span multiple lines
               but should be keep in a nice format
Label 4        Value 4

I know I could easily do this with a table but I don’t think a table is appropriate here. Despite what the example data might look like it is not related. Real label examples might be Name, Date, Description, and Reference Number.

I also want to try and avoid using any floating techniques if at all possible – basically because I think using a float would required me to specify a fixed width to ensure a relatively small margin between labels and values.

Other than that I am open to use any elements offered – and of course will use float/tables if they prove to be the best course of action.

Here is a starting JSFiddle of it not working if anybody wants to have a quick play.

Thanks

Answer 1

Try:

HTML

<div class="wrapper">
    <span class="Header">Label 1</span>
    <span class="Text">Value 1</span>
</div>

<div class="wrapper">
    <span class="Header">Label 2</span>
    <span class="Text">Value 2</span>
</div>

<div class="wrapper">
    <span class="Header">Label 3</span>
    <span class="Text">Value 3 is much longer so it needs to span multiple lines but should be keep in a nice format</span>
</div>

<div class="wrapper">
    <span class="Header">Label 4</span>
    <span class="Text">Value 4</span>
</div>

CSS

.wrapper {
  overflow: hidden;
  width: 200px; /* just for demo */
}

.Header
{
    float: left;
    width:100px;
    color: #00F;
    font-weight: bold;
}
.Text
{
    display: block;
    overflow: hidden;
}

Demo

http://jsfiddle.net/SGVE5/6/