CSS - display two text blocks on the same line

Question

How can I position two text blocks on the same line, one to the left and the one to the right, without using floats?

Like this:

Bla bla                   5
Whatever                 25
Boo                      12

Each line is a list item - <LI>

Answer 1

You have numbers in your example, which indicates to me that you may be showing tabular data. If that's the case, use a table. Easy!

If that's not the case, use spans with a set width:

.label {
     display: inline-block;
     width: 200px; // or whatever
}

and:

<ul>
    <li>
        <span class="label">Blah blah</span>
        5
    </li>
    <li>
        <span class="label">Stuff</span>
        25
    </li>
</ul>

Answer 2

You could use tables. Also, you could use absolute positioning and setting the same value for top and bottom to each ul object

Answer 3

you can see a working example here

ul {
    list-style-type:none;
}
li span {
    display:inline-block;
    width:100px;
}

<ul>
    <li>
        <span>Bla Bla</span>
        <span>5</span>
    </li>
    <li>
        <span>Whatever</span>
        <span>25</span>
    </li>
</ul>

Answer 4

I know this is an old one, but it would seem like the most semantically correct option here would be to use DL, DT and DT instead of LI.

<dl>
<dt>Bla bla</dt><dd>5</dd>
<dt>Whatever</dt></dd>25</dd>
<dt>Boo</dt><dl>12</dl>
</dl>

Then you would style it like this:

dl {
    margin: 0;
}

dt {
    clear: left;
    float: left;
    padding: 0 0 2px;
    font-weight: bold;
}

dd {
    float: left;
    margin-left: 10px;
    padding: 0 0 2px;
}

I know you stipulated no floats, but that is the way to get the job done.

Answer 5

Here is a very simple trick I used. It does use floats, but I think it still looks pretty nice:

HTML:

<h1 class="title1">Chicken Craft</h1>
<h1 class="title2">Minecraft Server</h1>

CSS:

.title1 {
  text-align: left;
  color: #269CEB;
  margin-top: 0px;
  float: left;
  clear: both;
}

.title2 {
  text-align: left;
  color: #FF9D00;
}