Två divar i en div

Jag har följande:

[red]
<div id="outer" class="outer">
   <div id="main" class="main">
     <div id="mainleft" class="mainleft">
           lalalu
     </div>
     <div id="mainright" class="mainright">
           lalala
     </div>
   </div>
</div>
[/red]

Och tillhörande CSS:

[red]
.outer
{
	border: solid 1px #669966;
	width: 600px;
	height: 400px;
	margin-top: 70px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.main
{
	width: 100%;
	height: 100%;	
}
.mainleft
{
	border-right: solid 1px #669966;
	width: 25%;
	height: 100%;
	float: left;
	padding: 5px 10px;
}
.mainright
{
	width: 65%;
	height: 100%;
	float: left;
	padding: 5px 10px;
}
[/red]

men nu till problemet i IE 6.0 (det är den jag har) så blir main alldeles för hög...eller som i mozilla så lägger sig .main .mainleft och .mainright över .outer vilken jag tycker ska läggas runt om alla .main divar

Hur ska jag lösa detta? eller förstår nu inte hur jag menar??

Jag vill alltså ha en ytter div som är 600x400 och inne i denna ska jag ha två divar som (mainleft och mainright)

Mvh icaaq