I am getting better at all thing css but i currently have a problme which I cant solve. This is what I want

I have a 660px wide container called #content. I want this split into 2 sections: #top and #bot.

#top has 2 sections of its own. #top_left and #top_right which I both want to be 330px in size with a 1 px grey line runing verticaly between them. They are side by side. Both #top_left and #top_right have a left and right margin of 10px.

Between #top and #bot there should be a 1px horzontal line grey in colour. This should form an upside down T with the verticle line between #yop_left and #top_right.

The idea is that no matter how big #top_left and top_right is there section in comparsion stay the same size.

I just cant get this to work any help would be great.
HTML Code:
<div id="content">
		<div id="top">
			<div id="top_left">top left</div>
			<div id="top_right">top right</div>
		</div><!-- end top -->
		<div id="bot">bottom</div><!-- end bot -->
	</div><!-- end content -->