Trying to create 3 specifically laid out divs - html

Question

I am trying to create some specific divs to hold content and I'm stuck trying to just create them using colors.
I went ahead and uploaded a crude idea of what I'm trying to create so I could show you guys.
http://imgur.com/lPJLuqE
I can get the first large square to show but not the other ones, can anyone shed some insight?
#row-one {
padding-top: 1em;
}
#left-block {
float: left;
width: 45%;
height: 25em;
background-color: black;
}
#right-block {
float: right;
width: 45%;
}
#block-one {
width: 100%;
height: 12em
background-color: black;
vertical-align: top;
}
<div id="row-one">
<div id="left-block">
<!--PLACEHOLDER-->
</div>
<div id="right block">
<div id="block-one"></div>
<div id="block-two"></div>
</div>
</div>

Answer 1

You were missing the semicolon ; after height: 12em and there were no styles specified for #block-two. Also, you specified the styles for the right-block div but were also missing the - in <div id="right block">.
#row-one {
padding-top: 1em;
}
#left-block {
float: left;
width: 45%;
height: 25em;
background-color: black;
}
#right-block {
float: right;
width: 45%;
}
#block-one, #block-two {
width: 100%;
height: 12em;
background-color: black;
vertical-align: top;
margin-bottom: 10px;
}
<div id="row-one">
<div id="left-block">
<!--PLACEHOLDER-->
</div>
<div id="right-block">
<div id="block-one"></div>
<div id="block-two"></div>
</div>
</div>