Help with DIV Positioning

I've got two Div's that I need to fit on top of each other without overlapping.

The top one needs to be aligned to the top left, and the one underneath needs to be aligned directly underneath the top div, all the way to the left as well.

Here's a small example:

----------
|--------|
----------
|--------|
|--------|
----------

I'm pretty rusty with my coding, it's been about a year since I've written any.

http://www.devolv.com is where I'm working, it works fine in Chrome but the alignment of the bottom div is wrong in other browsers; it's too high.

You can take a look at my source code, all the code is in the one .php file. I'll move it all to a stylesheet once I get it figured out, and I apologize for its messiness.

Thanks.

 

I'm not 100% sure what you mean, but why don't you place all your CSS in an external file rather than inline? It makes it very difficult for others to offer a solution if they can't read the code properly

 

It is hard to say without seeing any code, but try something like this -

<style type="text/css">
    #outerdiv { width:200px; overflow:hidden; }
    .innerdiv { float:left; display:inline; clear:both; width:200px; }
</style>

<div id="">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Code (markup):

I hope this helps.