Creating complex div structure using CSS - css

Question

I'm attempting to create a complex div structure using CSS.
I want it to be made up of four columns. On the left is just a list of images. On the right is the complex div structure that I can't figure out a way to create. There should be two large vertical boxes containing various details. In-between these vertical boxes are any number of horizontal boxes.
My problem is that I cannot work out how to create this div structure in a way that 'scales', i.e. there could be any number of horizontal boxes between the two vertical boxes.
This is the div structure I was attempting to use:
<div class="result">
<div class="detail_1">
<p>Detail 1</p>
</div>
<div class="details">
<p>Details</p>
</div>
<div class="details">
<p>Details</p>
</div>
<div class="detail_2">
<p>Detail 2</p>
</div>
</div>
Any help would be greatly appreciated!
EDIT: I have fixed this problem by just using tables. Thanks for the replies.

Answer 1

Update 2
Your question is: How to make the price & flight_number div the same height as the parent div (container)..
1) Use the technique described here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
2) update your CSS so that the flight number and the price are vertical aligned in the middle of their div.
I think that mine HTML structure is better then yours because it's more clear and easier to work with.
So based on my HTML structure: The parent container (flight_info) is stretchend as long as the content inside (the table with the rows will be the longest). the div's flight_number and price are also the total height of the parent container thanks of the technique described in step 1 above. The extra CSS (step 2) will align the price and flight number nicely in the middle.
OLD
<ul id="flights">
<li>
<ul class="images">
<li><img src="img1" alt="your image" /></li>
<li><img src="img2" alt="your image 2" /></li>
</ul>
<div class="flight_info" id="flight_EK49">
<div class="flight_number">
EK49
</div>
<table>
<thead>
<th>date</th>
<th>from</th>
<th>to</th>
</thead>
<tbody>
<tr>
<td>1/1/2013</td>
<td>departure airfield</td>
<td>destination airfield</td>
</tr>
...
</tbody>
</table>
<div class="price">
€999,99
</div>
</div>
</li>
// duplicate the above for a new flight..
</ul>
And for the CSS style (you must do the rest on your own because this is just an example. I didn't test any of the code):
<style>
#flights .images {
float: left;
width: 250px;
}
.flight_info {
float: left;
width: 700px;
}
.flight_info .flight_number,
.flight_info .price {
float: left;
width: 150px;
}
.flight_info .price {
float: right;
}
.flight_info table {
float: left;
width: 400px;
}
</style>
I think you will get the idea.
EDIT 1
Changed all the position absolutes to floats because it easier with the li's automatic heights.
I also added the leg images of the flight as well, but as I mentioned, you have to do the rest yourself ;)