please help for css positioning problem

hi all, i m facing a problem in css divs.. the divs are ovelapping on each other
in firefox but looking great in IE 6 n 7
there are three divs.. main , top n bottom. in html tags are like this:
<div calss="main">
<div class="top"></div>
<div class="bottom"></div>
</div>
in css
.main
{
width: 1000px;
height: 700px;
}
.top
{
height: 300px;
}
.bottom
{
height: 300px;
}

dun want to use fixed positions.. is there any other solution. help me plz if some1 knows

 

Make top and bottom float left and specify their width to 100%
Also note a div inside a div will be at the top unless you specify padding in the main div or add another div inside it.

 

maybe just define width's w/o float.

 

thx folks.. but it didnt work..gave float: left n width: 100%.. but still divs are overlapping in firefox.. while giving fixed positions then divs placement are different in bot IE n Firefox.. while they need to show in up n down positions..

 

I tried this code exactly, and seems OK in FF2. Can I see the actual page?