lining up headers in ordered lists

the headers and bullets or numbers don't line up

[gracesaieva]

Hi All,

I have a list with headers in it. It's pretty simple:

<div id=#middle>
......other content...
<ol>
<li><h2>text</h2><p>text</p></li>
<li><h2>text</h2><p>text</p></li>
<li><h2>text</h2><p>text</p></li>
<li><h2>text</h2><p>text</p></li>
</ol>
......other content...
</div>

Now, I want to keep the structure, because it really is on ordered list, steps in a process for amin stuff, but it needs the headings because the paragraphs are long and different enough to need that leading structure.

When It's on online, it displays fine for the first list item, but each one below that, the header starts on the line after the number.

Would it work to have something like
#middle ol h2 {padding:0; margin:0;}

[swa66]

First, get rid of the error in the html:
It should read

<div id="middle">
...

[justgowithit]

Hi gracesaieva,

Headings are block level elements. This causes them to appear on their own line with a document.

If you're trying to bring headings in line with other content a good approach is to use "display: inline;" in your declaration. Additionally, you can also achieve this effect by floating the heading left or right.

Which approach is best really depends on the structure of the document that you're working within.