How to place a div under two divs, if there is also another div floating at the left?

Here is the problem, I got a simple markup, a head, menu, footer, and the context. The menu is at the left and at the right is the context, where should be 3 divs inside: two divs should be in one row, and the third div should be just under them.

The problem is that the third div gets under the menu.

Here is the code which includes the comments, pelase have a look guys ...... I feel completely doomed about this one, don't have any idea ....

<html>
<head>
<style>

div.header{                                 border:1px     solid black }
div.menu{clear:both;float:left;             border:1px solid blue}
div.context{                                border:1px     solid #0099CC}
div.footer{clear:both;                      border:1px solid     red}

div.one {                                   border:1px     solid yellow}
div.two {                                   border:1px     solid purple}
div.three {                                 border:1px     solid green}

</style>
</head>

<body>

<div class="header">
    header 
</div>
<div class="menu"> 
    menu<br>menu<br>menu<br>menu
</div>
<div class="context">
    <div class="one"     style="float:left">Div 1 <BR>Div 1 <BR>Div 1 </div>
    <div class="two"     style="">Div 2</div>
    <div class="three"   style="clear:both">Div 3, what the hell are you doing here     under the menu? You should be just under the Div 1!</div>
</div>
<div class="footer"> 
    footer
</div>

</body>
</html>

Solution

If your menu is going to be of fixed width (like 200px), you can apply margin-left:200px for the div.context to align contents for context div.

If your menu is having dynamic width, use this css:

div.menu{ 
border: 1px solid blue;
display: inline-block;

}

and for context:

div.context  {
border: 1px solid #0099CC;
display: inline-block;

}