I have a form with a set of fieldsets. These fieldsets will be conditionally hidden and shown server side so I need these fieldsets to flow left to right top to bottom. The code below achieves this however the margin-bottom of 10px is not being honored by IE (IE7 only tested).
I read some posts that suggest this has to do with margins collapsing if you don;t add padding but I tried this and the same thing happens. How can I create a 10px space between 2 lines of fieldsets?
<html>
<head>
<style>
fieldset {
display: inline-block;
width: 30%;
height:90px;
vertical-align: top;
border: 1px solid black;
margin-bottom:10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<label>Label:</label>
<input type="text"/>
</fieldset>
<fieldset>
<label>Label:</label>
<input type="text"/>
</fieldset>
<fieldset>
<label>Label:</label>
<input type="text"/>
</fieldset>
<fieldset>
<label>Label:</label>
<input type="text"/>
</fieldset>
<fieldset>
<label>Label:</label>
<input type="text"/>
</fieldset>
</form>
</body>