margin-top for this div does not work in Firefox - html

Question

I have divided my layout into divs, and within the div="content" area I have a table and a filter option which need to be positioned. I'm trying to insert some margin between the filter option area and the navigation bar. This looks fine in Chrome but in Mozilla Firefox the filter options appear way below than they should.
This is my code and how it looks at the moment:
http://jsfiddle.net/elmiri/5mXJ7/ if you open this link in Chrome the filter option looks fine however in Mozilla it looks really bad.
Here is all of my code:
<div id="header">
<h1>LOGO</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Test
<li>Test
<li>Test
<li>Activity Feed
<li>Stats
<li>Contact Us
<li>Users
<li>My account
</ul>
</div>
</body>
</html>
<div id="personalised">
<p>Hello, </p>
</div>
<div id="content">
<form id="form1" method="get" action="">
<div id= "filter">
<label for="column">Select client type:</label>
<select name="column" id="column">
<option selected>Key</option>
<option >Norm</option>
<option >Onb</option>
</select>
<input type="submit" name="change" id="change" value="Filter">
<input type="submit" name="Remove" id="Remove" value="Show all">
</div>
<table>
<tr>
<th scope="col">Client name</th>
<th scope="col">Client type</th>
<th> </th>
<th> </th>
</tr>
<tr>
<td>Client2</td>
<td>KEY</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
<tr>
<td>Client3</td>
<td>KEY</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
<tr>
<td>client4</td>
<td>NORM</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
<tr>
<td>client4</td>
<td>ONB</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
<tr>
<td>client100</td>
<td>Key</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
</table>
</div>
This is the part of the code that positions the filter option:
<div id= "filter">
<label for="column">Select client type:</label>
<select name="column" id="column">
<option <?php if ($col == 'Key') echo 'selected'; ?>>Key</option>
<option <?php if ($col == 'Norm') echo 'selected'; ?>>Norm</option>
<option <?php if ($col == 'Onb') echo 'selected'; ?>>Onb</option>
</select>
<input type="submit" name="change" id="change" value="Filter">
<input type="submit" name="Remove" id="Remove" value="Show all">
</div>
the css code:
#filter {
float:right;
margin-top: 2%;
}
THIS filter div is within the Content div so I'm not sure if that's causing problem. I tried to set margin-top to 20 px and it still did not work in Firefox.
Would be grateful if someone helped me put a gap between the navigation bar and the filter option so that it looks fine both in Chrome and Mozilla.
Thank you

Answer 1

That's because the margin-top if set in a percentage it is proportional to the element's parent width and not height as one would normally expect. Margin on MDN.