text inside the block displaying incorrectly - html

Question

I have 3 blocks - block1, block2, block3..block1 & 2 are left floated
http://jsfiddle.net/MTSg4/1/
The text inside block3 needs to be displayed inside the block but for some reason its displaying outside.
css
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
background-color:red;
}
#block2{
height:90%;
width:50%;
background-color:green;
float:left;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
}
html
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
<div id="block3">
Block 3
</div>

Answer 1

You need to clear the floats in blocks 1 and 2. Try this for block3:
#block3{
height:90%;
width:50%;
background-color:yellow;
clear:both;
}

Answer 2

Your usage of floats is the problem. You see, block 2 is just a trial and error. It does not float left. Check this FIDDLE.
#block2{
height:90%;
width:50%;
background-color:green;
float:right;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
float: left;
}
Hope this helps!

Answer 3

Use this css
#block1 {
height: 10%;
width: 50%;
text-align: center;
background-color: red;
display: block;
float: left;
}
#block2 {
height: 90%;
width: 50%;
text-align: center;
background-color: green;
display: block;
float: left;
}
#block3 {
height: 90%;
width: 50%;
text-align: center;
background-color: yellow;
display: block;
clear: both;
}

Answer 4

I think you need to rethink the HTML to achieve this.
Perhaps a better solution is to split this into two columns, with block 1 and 2 in the first column, and block 3 in the second?
HTML
<div id="col1">
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
</div>
<div id="col2">
<div id="block3">
Block 3
</div>
</div>
CSS
html, body{
height: 100%;
width:100%;
}
body {
margin: 0;
}
#col1, #col2 {
float: left;
width: 50%;
height: 100%;
}
#block1{
height:10%;
text-align:center;
background-color:red;
}
#block2{
height:90%;
background-color:green;
}
#block3{
height:100%;
background-color:yellow;
}
Demo

Answer 5

Try this CSS:
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
background-color:red;
}
#block2{
height:90%;
width:50%;
background-color:green;
float:right;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
float: left;
}
.clear {
clear: both;
content: ' ';
*zoom: 1;
}
}
in your HTML:
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
<div id="block3">
Block 3
</div>
<div class="clear"></div>
This happens because the "block3" is floating around and not in a position while the other boxes are being called in left (including the box2 [It should be float: right]).
I've fixed and and added a debug class (clear).
Jsfiddle: Demostration
Hope it helps!