CSS placing two divs next to another - css

Question

I'm trying to build a template using divs.
A top div width 100%, no problem there.
Beneath that on the left and the right a small div both 200px
in between the main container consisting of two of columns both 50% of what is left.
My problem is these two colums get the size of 50% of the viewport, so the second column is placed under the main view.
HTML:
<div id="top">
<div class="but">top 1234</div>
<div class="but">top 5678</div>
<div class="but">top 91011</div>
<div class="but">top 121314</div>
</div>
<div id="middle">
<div id="butsRight">
<div class="butv">right1234</div>
<div class="butv">right567</div>
<div class="butv">right8910</div>
</div>
<div id="butsLeft">
<div class="butv">left1234</div>
<div class="butv">left5678</div>
<div class="butv">left91011</div>
</div>
<div id="middleMain">
<div id="middleMainL">
<div id="middleMainLb">LEFT QQQQQ
<br>CCCCC
<br>hhhhhh</div>
<div id="middleMainLm">
<table width=100% height=100% border=2>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="middleMainLo">LEFT
<p>eee</p>
<p>fff</p>
<p>ggg</p>
<p>hhh</p>
</div>
</div>
<!--middleMainL -->
<div id="middleMainR">
<div id="middleMainRb">RIGHT QQQQQ
<br>CCCCC
<br>hhhhhh</div>
<div id="middleMainRm">RIGHT
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
<p>dddd</p>
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</div>
<div id="middleMainRo">RIGHT
<p>eee</p>
<p>fff</p>
<p>ggg</p>
<p>hhh</p>
</div>
</div>
<!--middleMainR -->
</div>
<!-- middlemain -->
</div>
<!-- middle -->
CSS:
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#top {
margin-right: 80px;
background-color: green;
width: 100%;
text-align: center;
}
.middle {
width: 100%;
height: 100%;
background-color: yellow;
}
#butsLeft {
height: 100%;
width: 200px;
float: left;
background-color: green;
}
#butsRight {
height: 100%;
width: 200px;
float: right;
background-color: green;
}
#middleMain {
background-color: gray;
width:100%;
height:100%;
}
#middleMainL {
width:50%;
float: left;
background-color: black;
}
#middleMainR {
width:auto;
float: left;
background-color: brown;
}
#middleMainLb {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainLm {
width: 100%;
float: center;
background-color: purple;
text-align: center;
overflow: visible;
}
#middleMainLo {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainRb {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainRm {
width: 100%;
float: center;
background-color: purple;
text-align: center;
}
#middleMainRo {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
div.but {
text-align: center;
width: 200px;
background-color: orange;
position: absolut;
display:inline-block;
}
div.butv {
text-align: center;
width: 200px;
background-color: orange;
position: absolut;
height: 33%;
}

Answer 1

Right, I had a little look at it and this is what I came up with. Please do look into it a little to understand the code. Its fairly straight forward.
HTML:
<div id="header">Header</div>
<div id="right">Right Side Bar: Fixed width.</div>
<div id="left">Left Side Bar: Fixed width.</div>
<div id="content">
<div>
<div id="middleleft">Middle Left</div>
</div>
<div>
<div id="middleright">Middle Right</div>
</div>
</div>
CSS:
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
* {
box-sizing:border-box;
}
#header {
width: 100%;
height: 100px;
background: red;
}
#right, #left {
width:200px;
height: 500px;
float:left;
background:orange;
}
#right {
float:right;
}
#content {
overflow:hidden;
height: 500px;
}
#content > div {
width: 50%;
height: 100%;
float:left;
}
#middleleft {
float:left;
height:100%;
width:100%;
background: blue;
}
#middleright {
float:left;
height:100%;
width:100%;
background: green;
}
DEMO HERE

Answer 2

I don't know why I did it, but this is what you want (maybe? 'cause I didn't really understood the question)
http://jsfiddle.net/KTd8T/1/
When you were doing your css, you were doing some .example when example was a div. If it's a div, put #, if it's a class put "."
Now you can work on this copy and just try to write clear code.
There is another point: you are doing a top, and middle content, but you don't have a bottom content. Maybe this is why it's not display like you want ?
Thanks for editing your post and try to be more explicite !