aligning 2 DIV's aside one another

Hey guys.

I have a code that i'm trying to build with 2 nested divs that i want to align beside each other. i'm not sure if the below is the best way to go about it but it's the only way i could think of. only thing is that the div always just ends up under the one above it (in the nest).

So please, any guidance is UBER-appreciated.

Thanx
(i don't mind... let me know what i'm doing wrong.)

<div id="main" style="width: 1265px; height: 560px; overflow: auto;"> <!-- Middle -->
    <div id="leftmain" align="left" style="width: 705px; height: 560px; ">
        <table>
            <tr id="row">
                <td>
                    <img src="church.jpg" /></td>
                <td>
                    <img src="church.jpg" /></td>
                <td>
                    <img src="church.jpg" /></td>
             </tr>
        </table>
    </div>

	<div id="rightmain" align="right" style="width: 560px; height: 560px; ">
        <table>
            <tr id="row">
                <td>
                    1<img src="1.jpg" /></td>
                <td>
                    2<img src="2.jpg" /></td>
                <td>
                    3<img src="3.jpg" /></td>
                
            </tr>
        </table>
    </div>
	
	
	    <script type="text/javascript">
     var td = row.firstChild;
     function animate() {

         someID.scrollLeft = td.offsetLeft;
         if (td == row.lastChild)
             td = row.firstChild;
             else
                 td = td.nextSibling;
             setTimeout("animate()", 8000);
         }
         animate();
    </script>
	
</div>