Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h2>Update 2</h2> <p>Your question is: How to make the price &amp; flight_number div the same height as the parent div (container).. </p> <p>1) Use the technique described here: <a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" rel="nofollow">http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks</a></p> <p>2) update your CSS so that the flight number and the price are vertical aligned in the middle of their div. </p> <p>I think that mine HTML structure is better then yours because it's more clear and easier to work with. </p> <p>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.</p> <h2>OLD</h2> <pre><code>&lt;ul id="flights"&gt; &lt;li&gt; &lt;ul class="images"&gt; &lt;li&gt;&lt;img src="img1" alt="your image" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="img2" alt="your image 2" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="flight_info" id="flight_EK49"&gt; &lt;div class="flight_number"&gt; EK49 &lt;/div&gt; &lt;table&gt; &lt;thead&gt; &lt;th&gt;date&lt;/th&gt; &lt;th&gt;from&lt;/th&gt; &lt;th&gt;to&lt;/th&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1/1/2013&lt;/td&gt; &lt;td&gt;departure airfield&lt;/td&gt; &lt;td&gt;destination airfield&lt;/td&gt; &lt;/tr&gt; ... &lt;/tbody&gt; &lt;/table&gt; &lt;div class="price"&gt; €999,99 &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; // duplicate the above for a new flight.. &lt;/ul&gt; </code></pre> <p>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):</p> <pre><code>&lt;style&gt; #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; } &lt;/style&gt; </code></pre> <p>I think you will get the idea. </p> <h2>EDIT 1</h2> <p>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 ;)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload