First steps

I am very new to the power of css, but appreciate its power. THis is a
super easy question, I am sure.
I have the following in my aspx (html) page:

<div id="outer" class="outer">
<div id="inner1" class="inner1">
<div id="inner2" class="inner2">
</div>
</div>
</div>

and in my stylesheet I have:
..outer
{
width:500px;
height:500px;
border-style:solid;
border-color:Red;
border-width:thin;
}
..inner1
{
width:400;
height:400px;
border-style:solid;
border-color:Blue;
border-width:1px;
}
..inner2
{
width:300;
height:300px;
border-style:solid;
border-color:Green;
border-width:1px;
}

But the inner divs are rectangular (not square) and all have the horizontal
dimentsions of the outer div (the vertical dimentsions seem fine, abutting
on the left edge. I expected to have 3 square divs of the dimentsions
stated (500, 400,300). I am viewing this in IE 6.0.
TIA,

Paul