Arranging divs so that there is a margin inbetween

Question

In the html below I want the third div so that it is in the same row as the first two but with a 100px gap inbetween. The code displays the first two divs adjacent which is what i want but then the third div is displayed underneath the first two. Changing the style of the first two divs to something other than float left messes up the rest of the page.

Any ideas?

<div class="maintitle">

<div style="float: left;">
</div>
<div style="float: left;">
</div>
<div style="float: left; margin-left: 100px;">
</div>

</div>

Answer 1

Change all the float: left; declarations to display: inline-block; and you should be good to go.