CSS : align at a certain position - css

Question

I know what I want but I'm not sure how to best express it, so please be forgiving.
I have numbered headlines in my page, and paragraphs following the headlines. I wish to align the text of the paragraphs the same as the start of the title of the headline, and the numbers of the headlines being aligned to the right, at for example 0.5em of the title of the headline.
Here is an example in monospace font:
1. Introduction
This is the beginning of the introduction.
1.1. Sub header
Another paragraph here and when it comes to having
another line, it is indented as the first one.
1.1.1. Sub-sub header
Notice how the headlines and paragraphs are exactly
aligned, whereas the numbers in the headlines are shifted
to the right ?
1.2. Sub header 2
I'm sure you get the picture...
What is the best way to achieve this in HTML/CSS ?
It would be trivial to use tables but I wish to do otherwise if there is a cleaner way.

Answer 1

This is how I would do it:
HTML:
<ul id="list">
<li>
<h2>Intro<em></em></h2>
<p>This is the beginning of the introduction.</p>
</li>
<li>
<h3>Sub header<em></em></h3>
<p>Another paragraph here and when it comes to having
another line, it is indented as the first one.</p>
</li>
<li>
<h4>Sub-sub header<em></em></h4>
<p>Notice how the headlines and paragraphs are exactly
aligned, whereas the numbers in the headlines are shifted
to the right ?</p>
</li>
<li>
<h3>Sub header 2<em></em></h3>
<p>I'm sure you get the picture...</p>
</li>
</ul>
CSS:
#list {
counter-reset: level1 0 level2 0 level3 0;
margin-left:50px;
}
#list h2,
#list h3,
#list h4 { margin-left:-50px; }
#list em { float:left; width:40px; padding-right:10px; text-align:right; }
#list h2 em:before {
counter-increment: level1 1;
content: counter(level1, decimal) ".";
}
#list h3 em:before {
counter-increment: level2 1;
content: counter(level1, decimal) "." counter(level2, decimal) ".";
}
#list h4 em:before {
counter-increment: level3 1;
content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) ".";
}
Live demo: http://jsfiddle.net/9bkwQ/
Notice that:
There are no CSS classes set on the HTML elements - there is no need for that (Result: cleaner code)
The numbering is auto-generated via CSS counters which means that you don't have to update the numbering whenever you want to insert an item between other items.

Answer 2

I imagine you're using custom numbers? You're placing them there yourself without the use of ? I'd imagine so with that system.
Either way, I'd probably set up some divs to look like this:
Quick Note: You'd need to add clear:both to the main container to have them stack nicely.
<div style="display:inline-block; width:100%; clear:both")
<div style="float:left; margin-right:5px">
1.
</div>
<div style="float:left">
The first headline
</div>
</div>
Something like this would work fine and you could use your own styles to manipulate the structure/design, but again, I don't know if it's the absolute best way.

Answer 3

Check out a JSFiddle of it here: http://jsfiddle.net/uvQsR/2/
<div class="section">
<span class="number">1.1.</span>
<h4 class="heading">Sub header</h4>
<p> Another paragraph here and when it comes to having
another line, it is indented as the first one. </p>
</div>
with css
.section {
padding-left:40px;
}
.number{
text-align:right;
margin-left:-40px;
float:left;
width:40px;
}

Answer 4

You could do something like this, adjusting the width and margin as necessary (and depending on the depth/length of the header numbers)
<h2 class="number">1.</h2><h2 class="text">Introduction</h2>
<p>This is the beginning of the introduction.</p>
<h2 class="number">1.1</h2><h2 class="text">Sub header</h2>
<p>Another paragraph here and when it comes to having<br />
another line, it is indented as the first one.</p>
CSS
h2.number{display:inline-block; width:30px;}
h2.text{display:inline-block;}
p{margin-left:30px; margin-bottom:10px;}
http://jsfiddle.net/jasongennaro/VKP9Y/