Aligning 3 nested divs horizontally - html

Question

I'm working within wordpress and getting a bit frustrated with something that seems kind of simple. I'm trying to build a set of 3 boxes with nested divs inside each one.
The end product should look like this:
I can build the boxes alone no problem, but when I try to display them with the nested divs inside, they align vertically instead.
Here's the code I'm using currently:
#bannercontainer {
text-align: center;
width: 100%;
align: center;
}
#bcdiv1 {
position: relative;
width: 33%;
}
#bcdiv2 {
position: relative;
width: 34%;
}
#bcdiv3 {
position: relative;
float: right;
width: 33%;
}
#bannerbox {
border: 2px solid;
border-radius: 10px;
background-color: dbdbdb;
width: 325px;
height: 150px;
margin: 5px;
}
#bbdivtop {
border: 2px solid;
position: relative;
float: top;
height: 50px;
width: 100%;
}
#bbdivleft {
border: 2px solid;
position: relative;
float: left;
width:50px;
height: 80px;
}
#bbdivright {
border: 2px solid;
position: relative;
float: right;
height: 80px;
}
#bbdivbottom {
border: 2px solid;
position: absolute;
bottom: 0;
height: 20px;
width: 100%;
float: bottom;
}
And the html
<div id="bannercontainer">
<div id="bannerbox">
<div id="bbdivtop">
test
</div>
<div id="bbdivleft">
test
</div>
<div id="bbdivright">
test
</div>
<div id="bbdivbottom">
test
</div>
</div>
<div id="bannerbox">
<div id="bbdivtop">
test
</div>
<div id="bbdivleft">
test
</div>
<div id="bbdivright">
test
</div>
<div id="bbdivbottom">
test
</div>
</div>
<div id="bannerbox">
<div id="bbdivtop">
test
</div>
<div id="bbdivleft">
test
</div>
<div id="bbdivright">
test
</div>
<div id="bbdivbottom">
test
</div>
</div>
</div>

Answer 1

Add float:left and change width to percentage for main div with id bannerbox. Try:
#bannerbox {
border: 2px solid;
border-radius: 10px;
background-color: dbdbdb;
width: 30%;
height: 150px;
margin: 5px;
float:left;
}
DEMO FIDDLE

Answer 2

You have to change your code with the following 2 CSS rules ...
#bannerbox {
border: 2px solid;
border-radius: 10px;
background-color: dbdbdb;
width: 325px;
height: 150px;
margin: 5px;
float: left;
}
#bbdivbottom {
border: 2px solid;
height: 20px;
width: 100%;
float: right;
}