div inside list alignment issue in IE

Question

I have a div inside my li tags, and it displays properly aligned in every browser but IE.

In IE, it for some reasons decided to put the number way above the div. Here are screenies.

IE:

Every other browser (Chrome in this case):

Code:

HTML is generated with this php:

//iterate the new ordered array and echo html
foreach($sort_array as $ID=>$val)
{
//get the title and author
$query = "SELECT ID, TITLE, SUBTITLE FROM $usertable WHERE ID='{$ID}'";
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
//echo the data with html formating
echo '
    <li>
        <div class="article">
            <a href="/Articles/' . $row["ID"] . '">
                <h2>' . $row["TITLE"] . '</h2>
                <h3>' . $row["SUBTITLE"] . '</h3>
            </a>
        </div>
    </li>
';      
}

There really is no CSS here that could affect formatting. Just font-size, color, and margin-bottom.

Answer 1

Try adding the display inline property to your elements.

display: inline;

or

display: inline-block;

Answer 2

can you provide your css for the same?That would be helpful!
and can you specify why have you used div inside li rather than adding style to anchor tag or placing a child ul inside li ?