Positioning DIVs correctly

Hello,
I'm trying to make a simple content box, and inside two columns, but for some reason, I can't figure out how to get it working.

Here's what it looks like at the moment:



HTML Code:

<div class="contop"></div>
		<div class="conmid"><br />
			<div id="left">
				<div class="top"><div id="text">Box 1</div></div>
				<div class="mid"><br />Text</div>
				<div class="bot"></div>
			</div>
			<div id="right">
				<div class="top"></div>
				<div class="mid">
					<div id="newstext">
						Div Right
					</div>
				</div>
				<div class="bot"></div>
			</div>
			<br />
		</div>
		<div class="footer">Footnote</div>
		<div class="conbot"></div>

HTML:

Using this CSS:

.contop{ background: url('images/content-top.png') no-repeat; width: 991px; height: 15px;}
.conmid{ background: url('images/content-mid.png') repeat-y; width: 991px; height: auto; padding: 0px 20px 0px 20px; color: #FFF;}

.conmid #left{ width: 223px;}
.conmid #left .top{ background: url('images/content-left-top.png') no-repeat; width: 223px; height: 34px; }
.conmid #left .top #text { color:#757575; text-shadow: 0px 1px 0px #ccc; font-weight: bold; font-size: 14px; text-align: center; padding-top: 5px; margin-top: 2px;}
.conmid #left .mid{ background: url('images/content-left-mid.png') repeat-y; width: 223px; height: auto; padding: 0px 20px 0px 20px; }
.conmid #left .bot{ background: url('images/content-left-bot.png') no-repeat; width: 223px; height: 9px; }

.conmid #right{ width: 714px; }
.conmid #right .top{ margin-left: 240px; background: url('images/content-right-top.png') no-repeat; width: 714px; height: 12px; }
.conmid #right .mid{ margin-left: 240px; background: url('images/content-right-mid.png') repeat-y; width: 714px; height: auto; padding: 0px 20px 0px 20px; }
.conmid #right .bot{ margin-left: 240px; background: url('images/content-right-bot.png') no-repeat; width: 714px; height: 12px; }

.conbot{ background: url('images/content-bot.png') no-repeat; width: 991px; height: 15px;}
.footer{ background: url('images/content-mid.png') repeat-y; width: 991px; height: auto; text-align: center; color: #FFF;}

Code (markup):

I know it can be done more efficient, but this is working fine for me too.

The problem is that the #right and #left DIV won't sit next to eachother, they only want to be underneath eachother...
I've tried several things, like using float: left; but that puts the #left and #right DIVs on top of the main content, so then that looks all messed up.

Is there any easy way to fix this up ?

Thanks in advance.

 

Pur float: left; in the left content and the right content this will float them next to each other.

 

Like I already said, that messes up the box, since it will pull those divs on top, so the .conmid part will not be filled =/



That happens when I use:

.conmid #left{ float: left; width: 223px;}
.conmid #right{ float: left; width: 714px; }

Code (markup):

Any other solutions ?

 

Okay, now I've done it quite differently, but I think this is way better.
I've got them floated left now, and they're actually aligned good.
But they're now hitting the left side, and I want them in the middle... I have no clue on how to do this.

Current HTML:

	<div id="conleft">
		<div class="contop"></div>
		<div class="conmid">
			<br />Hi there
		</div>
		<div class="conbot"></div>
	</div>
	<div id="conright">
		<div class="contop"></div>
		<div class="conmid">
			Texts Here
		</div>
		<div class="footer">Footnote</div>
		<div class="conbot"></div>
	</div>

HTML:

Current CSS:

#conleft { float: left; }
#conleft .contop{ background: url('../images/content-top.png') no-repeat; width: 261px; height: 15px;}
#conleft .conmid{ background: url('../images/content-mid.png') repeat-y; width: 261px; height: auto; padding: 0px 20px 0px 20px;}
#conleft .conmid{ width: 261px; }
#conleft .conmid .top{ background: url('../images/content-left-top.png') no-repeat; width: 223px; height: 34px; }
#conleft .conmid .top #text { color:#757575; text-shadow: 0px 1px 0px #ccc; font-weight: bold; font-size: 14px; text-align: center; padding-top: 5px; margin-top: 2px;}
#conleft .conmid .mid{ background: url('../images/content-left-mid.png') repeat-y; width: 223px; height: auto; padding: 0px 20px 0px 20px; }
#conleft .conmid .bot{ background: url('../images/content-left-bot.png') no-repeat; width: 223px; height: 9px; }
#conleft .conbot{ background: url('../images/content-bot.png') no-repeat; width: 261px; height: 15px;}

#conright { float: left; }
#conright .contop{ background: url('../images/content1-top.png') no-repeat; width: 991px; height: 15px;}
#conright .conmid{ background: url('../images/content1-mid.png') repeat-y; width: 991px; height: auto; padding: 0px 20px 0px 20px;}
#conright .conmid{ width: 991px; }
#conright .conbot{ background: url('../images/content1-bot.png') no-repeat; width: 991px; height: 15px;}
#conright .footer{ background: url('../images/content1-mid.png') repeat-y; width: 991px; height: auto; text-align: center; color: #FFF;}

Code (markup):

Thanks in advance.

 

Add a margin to them.

 

Solved it by using tables.

 

Went backwards in time by using tables. Learned nothing. Gave up.

 

overflow:hidden; is all you needed to make the parent DIV encapsulate the child DIV's.

But, as Dr. Howard said, you just went back in time. Fix it now or fix it later, you're choice.