Vertical alignment of side-by-side divs
===

A couple of quick heads ups on this little project of mine: 

 - It cannot use javascript or `<script>` tags at all (the site it's going on doesn't support it for various reasons)  
 - All CSS elements must be within the relevant html tags, for example: `<body style="background-color:black>` and so on.

So I'm trying to display two divs side by side and have so far managed that by floating one left and the other right, with their height, width and overflows defined and, in preview, it looks great, but when I open it up in a browser, the right-hand div is slightly lower than the left-hand div, probably a line break or so lower. I'll try to illustrate:

    |---------------|
    |               |       |---------------|
    |               |       |               |
    |               |       |               |
    |   Div 1       |       |               |
    |               |       |     Div 2     |
    |               |       |               |
    |               |       |               |
    |               |       |               |
    |---------------|       |               |
                            |---------------|

What do I need to do to stop the second div being that little bit lower than the first? It's driving me nuts. Here's the code I have so far for it:

    <div>
    <div style="width:300px; height:300px; overflow:auto; border:1px solid #766227; float:left">
    --Various information here--
    </div>
    
    <div style="width:300px; height:300px; overflow:auto; border:1px solid #766227; float:right">
    --Various other information here--
    </div>
    </div>
         
