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 😉