Best way to align left after line break

Question

As you see, I need to align text after line break.

First I tried table. but as you see each item has different width(like note, humidity...). So I had to make each table to each item. I don't think it's right.

And I tried this.

li.list {
    padding-left: 3.5em;
    text-indent: -3.5em;
}

It seemed work but the exact em showed different spaces by different browsers(including mobile). Meaning that I couldn't make it compatible.

I hope there's a neat and simple way to solve it..

Answer 1

For future people who'd end up on this question, there is a simple way to have Jace's 1st solution without specifying a width for the right part.

/* This is all you need */

.pretext {
  float: left;
}
.text {
  overflow: hidden;
}


/* This is just to make it pretty */

.pretext {
  margin-right: 10px;
  font-weight: bold;
}

<div class="text-container">
  <div class="pretext">Something:</div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis.
    Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum.
  </div>
</div>

<div class="text-container">
  <div class="pretext">Something else:</div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis.
    Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum.
  </div>
</div>

Answer 2

//HTML   
 <div class="container">
        <span class="textHeading">Something: </span>
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis. Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum. 
        </p>
    </div>

    <div class="container">
        <span class="textHeading">Something else: </span>
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis. Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum. 
        </p>
    </div>

//CSS

    textHeading, .text{
        display: inline-block; vertical-align: top;
    }
    .textHeading
    {
        font-weight:bold;   
        width: 120px;
        /*text-align: right;*/
    }
    .text
    {
        width:500px;
        padding:0; margin:0;
        width: 400px; 
    }


    You can check here: `http://jsfiddle.net/49EBr/2/

Answer 3

Solution #1:

Fiddle:
http://jsfiddle.net/38GpE/2/

CSS:

.pretext
{
    font-weight:bold;
    display:inline-block;
    vertical-align:top;
}

.text
{
    width:300px;
    display:inline-block;
}

HTML:

<ul>
    <li>
        <div class="pretext">Something: </div>
        <div class="text">
            ...text...
        </div>
    </li>
</ul>

The obvious problem is the <li> bullet point... In your example, it looks like you might be able to just use list-style:none; to hide the bullet, and use a - (minus symbol).

If that won't suffice, hiding the bullet point and positioning a background: url(mybullet.png) no-repeat left top; might work.

---

Solution #2:

Another solution using display:table-cell, but keep in mind this isn't supported in IE7. The benefit of this though is that you don't have to define a width of the 2nd column.

Fiddle:
http://jsfiddle.net/38GpE/3/

CSS:

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}

---

Solution #3:

You said, in the comments, that you don't need to use a <li>. It's a pain, but could you not just define a table for each item?

Fiddle:
http://jsfiddle.net/zuPcx/

HTML:

<table>
    <tr>
        <td class="pretext">Something:</td>
        <td>{your text}</td>
    </tr>
</table>

<table>
    <tr>
        <td class="pretext">Something else:</td>
        <td>{your text}</td>
    </tr>
</table>

CSS:

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}