Positioning 4 divs - css

Question

Okay so I've been trying to position these 4 divs for about 6 hours now. The routes box is suppose to take up whatever height is left between the navigation and info divs, wasn't quite sure how to say that. If someone could help me out or point me in the right direction I would really appreciate it.
http://i.stack.imgur.com/41q3H.png
current code is at 98.214.131.200/new.php & 98.214.131.200/defualt.css

Answer 1

<div>
<div style="background-Color:black;height:35px"></div>
<div style="width:30%;float:left;height:500px">
<div style="height:50%;background-color:green;width:100%"></div>
<div style="height:50%;background-color:blue;width:100%"></div>
</div>
<div style="width:70%;float:right;height:500px;background-color:red"></div>
</div>

Answer 2

set the height:350px; of class .routes it may help you.
As Below:
.routes {
background: none repeat scroll 0 0 #0000FF;
height: 350px;
width: 300px;
}
JSFIDDLE:http://jsfiddle.net/beABW/

Answer 3

<div class="navigation"></div>
<div class="content">
<div class="firstCol">
<div class="routes"></div>
<div class="info"></div>
</div>
<div class="secondCol">
<div class="google_map"></div>
</div>
</div>
In your style.css
.navigation{
height:35px;
width:100%;
}
.content{
width:100%;
}
.firstCol{
float:left;
width:300px;
height:auto;
}
.routes{
width:300px
height:auto;
}
.info{
width:300px
height:200px;
}
.secondCol{
float:left;
width:auto;
height:auto;
}
.google_map{
width:auto;
height:auto;
}

Answer 4

Assuming you do not know the height initially you will need to do this programmatically by getting the height of Google Map minus the height of info and then setting routes to that height. Example here. Or you can use a table :-(

Answer 5

.class1
{
float:left;
}
#one
{
height:35px;
width:100%;
border:1px solid red;
}
#two
{
height:200px;
width:300px;
border:1px solid red;
}
#three {
border: 1px solid Green;
height: 403px;
}
#four
{
height:200px;
width:300px;
border:1px solid red;
}
#lftpanel {
float: left;
width: 300px;
}
#rgtpanel {
float: left;
width: 808px;
}
<div id="mainDIv">
<div id="one" class="class1">
</div>
<div id="lftpanel">
<div id="two" class="class1">
</div>
<div id="four" class="class1">
</div>
</div>
<div id="rgtpanel">
<div id="three" class="class1">
</div>
</div>
</div>

Answer 6

Here's an example for a table solution (not very W3C but the solution will work in older browsers, too) :
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2">Header
</td>
</tr>
<tr>
<td width="300px">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="100%">topleft</td>
</tr>
<tr>
<td width="100%" height="200px">bottomleft</td>
</tr>
</table>
</td>
<td height="1000px">right</td>
</tr>
</table>
I tried this before, but doesn't work:
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2">Header
</td>
</tr>
<tr>
<td width="300px">topleft</td>
<td rowspan="2">right</td>
</tr>
<tr>
<td width="300px" height="200px">bottomleft</td>
</tr>
</table>

Answer 7

Using flex-boxes may be what you are after. Flex-boxes can be used to stretch/grow a div to fill it's parent while taking into account other children of it's parent. I have an example here of it doing what I believe your asking for.
Note: I'm not sure what browser versions this works in.

Answer 8

I edited khurram's answer, the trick is, float everything and to take up whatever space is left use overflow:hidden (no float!)
Edit:
http://jsfiddle.net/hashie5/v4jFr/