Why can't I statically align two divs?

See more:

CSS

HTML

Okay, so this is slightly confusing so bear with me. I'm trying to create a page with a side bar and some main content, as well as a title bar up at the top. The title bar is in place and works, so I'm not too concern about it. But although I've gotten the panel and content to finally stack horizontally, whenever the page resizes or I zoom in, the content gets pushed to below the panel, despite them both being in a container that should at least clip the content (the content runs over the background color of its container). Anyway, here is my CSS and the implementation of it:

#links		{ width:420px; background:#2583FE; float:left; border:1px solid #0961D3; border-left:0px solid black; height:100%;} /*This is the panel*/
#cont       { background:#F2F5A9; width:100%; float:left;  height:100%;} /*This is the content*/
#main       { overflow:auto; margin-left:400px; float:left; width:900px; padding-left:10px; margin:0 auto; }/*This is the parent container*/

<div id="cont">

	<div id="links">
		<!--All my panel stuff-->
	</div>
		
	<div id="main">
		<!--A table with some values-->
		<table width="100%">
			<tr>
				<td>Item 1</td>
				<td>Item 2</td>
				<td>Item 3</td>
			</tr>
		</table>
	</div>
</div>

Does anyone know what I'm doing wrong? I would like the table (and the rest of the content) to stay stationary instead of repositioning itself and defaulting to a vertical div stack. I'm not sure what's causing it. Hopefully this all makes sense. Any help is appreciated. Thanks in advance.

There's an image of the problem: Here