jumbotron height and float - html

Question

im kind of new to css/html and bootstrap itself. I've encountered two problems.
One is: I want to fix the 3rd and 4th box height to 100%, but no mater what div, or class i change to 100% it makes no changes.
Second: How can i make Box4 go under box2, so its not inline with box3?
Link to describe problem: http://jsfiddle.net/BXZrX/6/
and here is a picture of what i want: http://oi62.tinypic.com/osqule.jpg
<div id="content">
<div class="jumbotron">
<div class="container-fluid">
<h1>Join now!</h1>
<p>To get full use of the website, register now!.</p>
Sign up
</div>
</div>
<div class="bordertop">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box2</h1>
<p>text</p>
</div>
</div>
</div>
<div class="box3">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box3</h1>
<p>text</p>
</div>
</div>
</div>
<div class="box4">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box4</h1>
<p>text</p>
</div>
</div>
</div>
</div>
#content > div {
float:left;
width:49%;
}
#content > div.bordertop {
float:right;
width:49%;
}
#content > div.box3 {
clear:both;
width:49%;
float:left;
}
#content > div.box4 {
float:right;
width:49%;
}

Answer 1

Here's a start:
http://jsfiddle.net/jPZLd/11/
I've swapped boxes 2 and 3 so that they flow correctly down then across the page:
<div id="content">
<div class="column">
<div class="jumbotron">
<div class="container-fluid">
<h1>Join now!</h1>
<p>To get full use of the website, register now!.</p>
Sign up
</div>
</div>
<div class="bordertop">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box2</h1>
<p>text</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="box3">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box3</h1>
<p>text</p>
</div>
</div>
</div>
<div class="box4">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box4</h1>
<p>text</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
If you need both boxes 2 and 4 to have the same baseline, it's easy if your content is static - just adjust the height of the shorter box manually, eg.
.box4 .jumbotron {
height: 319px;
}
It gets a bit harder if you have to deal with dynamic content. I think you'd end up needing to fake it by applying the background color to the container element and hiding the bits you don't want to see.