Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Steven beat me, but I'll charge a little more ;-). Here's the markup for a quick solution that matches your requirements (CSS should be a in a separate file). Open issues:</p> <ul> <li>Cross-browser? Try forcing browsers into strict mode to have to deal with only one box model (especially important on IE6)</li> <li>As Steven pointed out, image height will have to be fixed (or container height), but the bigger problem is your requirement to wrap longer titles. The markup and CSS I provided don't deal with that well, but getting this to work right means you have to decide on a max height for the titles or drop your requirement to automatically wrap items (so that we can use a table). I suggest to instead put everything underneath the images, with a fixed container height.</li> </ul> <p>markup and CSS:</p> <pre><code>&lt;style type="text/css"&gt; h3.category { clear: both; } div.item { float: left; width: 83px; margin-right: 20px; } div.item img { width: 83px; height: 125px; } div.item h4 { margin-bottom: 3px; } div.item h5 { margin-top: 3px; } &lt;/style&gt; &lt;h3 class="category"&gt;Category &lt;strong&gt;title&lt;/strong&gt;&lt;/h3&gt; &lt;div class="item"&gt; &lt;h4&gt;Title&lt;/h4&gt; &lt;img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /&gt; &lt;h5&gt;Subtitle&lt;/h5&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;h4&gt;Longer Title&lt;/h4&gt; &lt;img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /&gt; &lt;h5&gt;Longer Subtitle&lt;/h5&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;h4&gt;Very Long, Wrapping Title&lt;/h4&gt; &lt;img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /&gt; &lt;h5&gt;Very Long, Wrapping Subtitle&lt;/h5&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;h4&gt;Title&lt;/h4&gt; &lt;img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /&gt; &lt;h5&gt;Subtitle&lt;/h5&gt; &lt;/div&gt; &lt;h3 class="category"&gt;Category &lt;strong&gt;title&lt;/strong&gt;&lt;/h3&gt; &lt;div class="item"&gt; &lt;h4&gt;Very Long, Wrapping Title&lt;/h4&gt; &lt;img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /&gt; &lt;h5&gt;Very Long, Wrapping Subtitle&lt;/h5&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;h4&gt;Longer Title&lt;/h4&gt; &lt;img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /&gt; &lt;h5&gt;Longer Subtitle&lt;/h5&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;h4&gt;Title&lt;/h4&gt; &lt;img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" /&gt; &lt;h5&gt;Subtitle&lt;/h5&gt; &lt;/div&gt; </code></pre>
 

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