Simple HTML/CSS Layout Advice

Evening all. smile

I'm looking to steal some expertise if you will. I'm start by saying that I am by no means a designer and it has been quite some time since I tried.. wink

I'm looking to achieve something like the attached image below. It's not particularly easy on the eye but it would do a job for what I require.

My question to you is, how could this be best achieved? I currently have the following but suspect it is horrible..

Code: (html)

<html>
<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
<title>Example Layout</title>
</head>
<body>

<div id="header">
<a href="default.aspx" title="Title"><img src="./Images/banner.png" alt="Descriptive Title" /></a>
</div>

<div id="menu">
   <ul>
   <li><a href="./default.aspx">Home</a></li>
<li><a href="./two.aspx">Two</a></li>
<li><a href="./three.aspx">Three</a></li>
   </ul>
</div>

<div class="left-element">
</div>

<div class="right-element">
</div>

<div id="footer">
</div>

</body>
</html>

Code: (css)

body {
}

#header {
height: 90px;
background: #FFFFFF;
width: 95%;
border: 1px dashed;
margin: 0 auto;
}

#menu
{
width: 95%;
margin: 0 auto;
padding: 10px 0px 0px 0px;
}

#menu ul
{
list-style: none;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}

#menu li
{
float: left;
margin: 0 0.15em;
}

#menu li a
{
background: url(Images/background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

.left-element {
float: left;
height: 400px;
background: #FFFFFF;
width: 19%;
border: 1px dashed;
margin: 5px 0px 5px 30px;
text-align: center;
padding: 0px 0px 0px 0px;
clear: both;
}

.right-element {
float: right;
height: 400px;
background: #FFFFFF;
width: 75%;
border: 1px dashed;
margin: 5px 30px 5px 0px;
padding: 0px 0px 0px 5px;
}

#footer
{
clear: both;
height: 40px;
background: #FFFFFF;
width: 95%;
border: 1px dashed;
margin: 0 auto;
text-align: center;
}

I appreciate that it is a bit of a big ask but would really appreciate some pointers. Along similiar lines, is it possible to prevent the div's from overflowing? i.e. Make the div's dynamic so that they are of a fixed size unless the content overflows?

As for the breadcrumb, I have not looked into this yet but would appreciate any recommendations.

Thanks guys and gals.