PHP SQL - appearing outside div tag - php

Question

I've spent all afternoon trying to figure this out with no success, I wondered if anyone could help?
I have a dropdown menu on my site which is working perfectly. I've duplicated one of the menu options and after I did this it still worked fine, it had a php / SQL query inside but once duplicate it still did what it should.
What I did then was change the SQL and although the query is correct (checked in myphpadmin) all of my results appear out side of the div tag for some reason, its as if the div tag is closing itself.
Here's my code:
'
<li>Brand<!-- Begin 4 columns Item -->
<div class="dropdown_5columns"> <!-- Begin 4 columns container -->
<div id="top"></div>
<div class="col_4">
<h2 style="width:98%;">Choose from the following Brands:</h2>
</div>
<div class="col_1" style="width:190px;">
<?php
$databrand = mysql_query("SELECT DISTINCT(brand), COUNT(*) as Total from `pt_products` where `brand` <>'' group by `brand` limit 5")
or die(mysql_error());
while($infobrand = mysqlfetch_array( $databrand ))
{
print "<li style='width:190px;'>";
print "<a href='/brand'>".$infobrand['brand']." (".$infobrand['Total'].")</a></li>";
}
print "</div>";
?>
<div id="bottom"></div>
</div><!-- End 4 columns container -->
</li>`
I can't seem to figure this one out. All I did was change the SQL Query.
I've tried deleting the duplicate content and starting again, but get the same outcome.
Any help would really be appreciated.
here's the view source data on of my site:
<li>Brand<!-- Begin 4 columns Item -->
<div class="dropdown_5columns" style="position:absolute;"> <!-- Begin 4 columns container -->
<div id="top"></div>
<div class="col_4">
<h2 style="width:98%;">Choose from the following Brands:</h2>
</div>
<div class="col_1" style="width:190px;">
<li style='width:190px;'><a href='/brand'>Balterio (50)</a></li>
<li style='width:190px;'><a href='/brand'>Dale Hardware (24)</a></li>
<li style='width:190px;'><a href='/brand'>EuroSpec Hardware (2)</a></li>
<li style='width:190px;'><a href='/brand'>Everbuild (35)</a></li>
<li style='width:190px;'><a href='/brand'>Jeld Wen (4)</a></li>
</div>
<div id="bottom"></div>
</div><!-- End 4 columns container -->
</li>
You can't tell from below but the first <li style='width:190px;'> and the </div> after the li list are higlighted in red (error) and also the last </li>
Thanks in advance for your help.

Answer 1

You're using <li>, which should be inside a <ul> or <ol>, which you can then put inside a <div> if you need. Alternatively, you can change the <li> to something else, such as another <div>.
Your problem is like when you put a <p> directly inside a table without nesting in <tr><td>.