Issue aligning this with CSS - html

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.