im trying to get the positioning right on these divs, I would like it so that the banner, div is half the page and to the right of the page so that it covers the same horizontal space that the container does, and to have the menubar div left aligned. 

HTML: 

```
 <html>
    <head>
    <meta content="en-gb" http-equiv="Content-Language">
    <title>hhhh</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    </style>
    </head>
    <body>

    <div id="bannerdiv" title="Banner" align="center">

        <img alt="logo" height="63" src="images/Logo.gif" width="126"></div>

    <div id="container">
    <h2 class="auto-style2">tgfdgfdgfghgfhgfh</h2>

        </div>

    <div id="menubar" title="menu" style="width: 13%">
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </div>
    <div id="mainpage" class="auto-style1" style="height: 96px; width: 82%">

    </div>

    </body>
    </html>

```

CSS:

```
#container {
    background-color: #008852;
    font-family: Arial;
    color: #FFFFFF;
    text-align: center;
    margin-top: 10px;
}

#menubar

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
a:link, a:visited {
    display:block;
    font-weight:bold;
    color:#000000;
    background-color:#EFF1EB;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    border-style: solid;
    border-color: #638529;
    font-family: Arial, Helvetica, sans-serif;
    border-top-width: 1px;
}
a:hover, a:active {
    background-color:#7A991A;
}
#mainpage {
    width:50%;
    float:left;
    background-color: #EDEFEE;
}
#menubar {
    font-size: xx-small;
    width:50%;
    float:left;
}

```