div float over an other div

Good morning,

I would like to have a two columns and two lines layout.

Example :

<div id="content">
          <div id="top">
                    <div id="topLeft" />
                    <div id="topRight"/>
          </div>
         <div id="bottom">
                    <div id="bottomLeft" />
                    <div id="bottomRight"/>
          </div>
</div>

I've used float positionning but my "top" div and "bottom" div float over my "content" div.
(I've uploaded a screenshot)

What is wrong ? :)

Thank you for your help,
Steven  

//HTML
<div id="Page">
<div id="Main">
    <div id="Top">
        <img src="./Contnt/picture.JPG" alt="screenshot" />
        <div id="welcomeMessage">
            <h1 class="green">Save </h1> <h1>your bees</h1>
            <p><%= Html.Encode(ViewData["Message"]) %></p>
        </div>
    </div>
    
    <div id="Bottom">
        <div id="keyFeatures">
            <h1>Key Feature</h1>
        </div>
        <div id="whatsInside">
            <h1>Whats Inside</h1>
            <p><%= Html.Encode(ViewData["Message"]) %></p>
        </div>
    </div>
</div>
</div>
 
//CSS
body
{
	background-color: #FFFFFF;
	font-size: 0.75em;
	font-family: Arial, Verdana, Sans-Serif;
	color: #7A7A7A;
	margin: 0;
	padding: 0;
}
 
/*
/* PRIMARY LAYOUT ELEMENTS
-----------------------------------*/
 
#page
{
	width: 972px;
	margin: 50px auto 10px auto;
	border: solid 1px #e3e3e3;
}
 
#main
{
	margin-top: 20px;
	padding: 30px 47px 30px 47px;
}
 
div#welcomeMessage
{
	width: 323px;
	float:right;
}
div#keyFeatures
{
	float: left;
	width: 200px;
}
 
div#whatsInside
{
	float: right;
	width: 200px;
}

Select allOpen in new window

Capture.JPG