Issue aligning this with CSS

Question

My problem is quite simple, but I couldn't figure out how to do it. I have a div and inside it, I display some information . basically, something like this:

title1:         20
title2:         30

I want the title to be aligned to the left, and the number to the right. Here is how I did http://jsfiddle.net/MmLQL/34/ . As you can see, I have a line break between the number and the title (which I believe comes from the use of h tag). But the thing is even if I use a span tag which is supposed to display elements inline and does not force line break, I lose the text-align right/left option. Here is an exmaple : http://jsfiddle.net/MmLQL/35/

Answer 1

You should try this way with "float:":

.container {
    width: 100%; 
    clear: both;
}
.title {
    float:left ; 
    display: inline;
}

.number {
    float: right;
}

<div >
    <div class="container">
        <div class="title">title:</div>
        <div class="number">number </div>
    </div>
    <div class="container">
        <div class="title">title:</div>
        <div class="number">number </div>
    </div>
</div>

Answer 2

I'd do this woth float param. Like this: http://jsfiddle.net/dan1410/MmLQL/38/

Answer 3

Try this, http://jsfiddle.net/MmLQL/36/,

HTML

<div >
     <h3>number </h3>
    <h2 >title: </h2>
</div>
<div >
     <h3>number </h3>
    <h2 >title: </h2>
</div>
<div >
     <h3>number </h3>
    <h2 >title: </h2>
</div>
<div >
     <h3>number </h3>
    <h2 >title: </h2>
</div>

CSS

h2 {text-align:left}

h3 {
    text-align: right;
    float:right;
}

You might have to use float-clear on the divs though, this should help, http://www.positioniseverything.net/easyclearing.html,

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

..and modify the divs as class="clearfix".

Answer 4

I think the following should work, using inline-block to adjust the layout of the headers, then a float on the left-aligned one to ensure it's nestled against the right one.

div { width: 100%; }
h2 {
  width: 50%;
  display: inline-block;
  float: left;
}

h3 {
  display: inline-block;
  width: 50%;
  text-align: right;
}

Answer 5

You can also use CSS table/table-cells

<div class="container">
     <h2>title: The Title</h2>
     <h3>number</h3>
</div>

CSS:

.container {
    border: 1px solid gray;
    display: table;
    width: 400px; /* set to 100% if full width */
}
h2 {
    text-align:left;
    display: table-cell;
}
h3 {
    text-align: right;
    display: table-cell;
}

See demo http://jsfiddle.net/audetwebdesign/pcZaq/

This approach is useful if you need some control over vertical alignment.

In addition, the table-cells will always remain on a single line, unlike floats or inline-blocks that could wrap to a second line for small screen sizes.

The choice depends in part on how you want the layout to behave in a responsive manner.

Answer 6

Instead of all the hacky solutions provided in other answers, it looks like you want to align tabular data. In which case, you should use a table for that.

Display:table-cell actually only exists in CSS to give the actual element and it's children their styles. It should not be used to let non-table elements behave like table elements. At least, imho.

Float:left seems like an ok alternative, if you're only looking for aligning the lay-out of the elements.

If your data actually is tabular data, then use a table. It solves your problem and is more semantic at the same time.