CSS/HTML Layout

<style type="text/css">
body {
    margin: 0px;
    background-color: #ffffff;
    font-family: arial, verdana, sans-serif;
    text-align: center;
}
#main-frame {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 960px;
}
#main-page {
    padding: 0px 10px 10px 10px;
    background-color: #ffffff;
}
#block1 {
    height: 350px;
    width: 520px;
    border-style: solid;
    border-width: 1px;
    margin: 0px 0px 0px 0px;
}
#outer-block {
    height: 700px;
    width: 400px;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    margin: 0px 0px 0px 0px;
}
#block1, #outer-block {
    float: left;
}
#block2 {
    height: 250px;
    width: 400px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    margin: 0px 0px 0px 0px;
}
#block3 {
    height: 450px;
    width: 400px;
}
#block4 {
    height: 350px;
    width: 260px;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    margin: 0px 0px 0px 0px;
    position: relative;
    top: -351px;
}
#block5 {
    height: 350px;
    width: 259px;
    border-style: solid;
    border-width: 0px 1px 1px 0px;
    margin: 0px 0px 0px 0px;
    position: relative;
    top: -351px;
}
#block4, #block5 {
    float: left;
}
</style>
<div id="main-frame">
   <div id="main-page">
      <div id="block1"></div>
      <div id="outer-block">
         <div id="block2"></div>
         <div id="block3"></div>
      </div>
      <div id="block4"></div>
      <div id="block5"></div>
   </div>
</div>