Picture blocks with captions

HTML and CSS XSLT JavaScript Images Soft Etc

	Task:	to create float blocks whose height and width are tied to the dimensions of a picture and its caption.

The aim here is to distribute the content as evenly as possible across available screen space (taking into account the abundance of screens and display resolutions).

In this example we will look at creating float blocks whose height is the sum of the image height in pixels and the text height in em, while width is fixed both in pixels and in em.

How it looks in the browser

Mandership by Artemy Lebedev, Second Edition

Optosystems ophthalmologic excimer laser apparatus

Folderix flash drive

Ptolemy’s Map by Herz Frank

Ancor website 2.0

Rigroup website

Day of the Dragon by Vadim Panov

Grain Holding corporate identity

<style type="text/css">
.floats
{
/* Compensating indent between float blocks so&nbsp;that they take all available space */
margin: -3em 0 0 -2em;

/* IE-specific rules */
position: relative;
display: inline-block;
clear: both;
}
.floats:after
{
content: '';
display: block;
clear: both;
}
.floats .left
{
position: relative;
float: left;

/* Removing double indents in&nbsp;IE */
display: inline;

/* Hiding everything outside of&nbsp;our constraints */
overflow: hidden;

/* Indents between float blocks */
margin: 3em 0 0 2em;

/* Setting the minimal width for picture and text */
width: 14em;
min-width: 200px;
}
.floats .left .r
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.floats .left .min
{
/* Setting the minimal width for picture */
margin: 0 0 200px 0;

/* Setting the minimal width for text */
height: 4em;

/* Repeating the minimal width for picture for&nbsp;IE */
width: 200px;
}
</style>
<div class="floats">
    <div class="left">
        <div class="r">
            /everything/izdal/kovodstvo2/"><img src="//img.artlebedev.ru/everything/izdal/kovodstvo2/izdal-kovodstvo2-anon.jpg" alt="Mandership. Second Edition" /></a><br />
            /everything/izdal/kovodstvo2/">Mandership</a> by&nbsp;Artemy Lebedev, Second Edition
        </div>
        <div class="min"></div>
    </div>
    <div class="left">
        <div class="r">
            /everything/optosystems/"><img src="/everything/optosystems/optosystems-anon.jpg" alt="Optosystems" /></a><br />
            Optosystems /everything/optosystems/">ophthalmologic excimer laser apparatus</a>
        </div>
        <div class="min"></div>
    </div>
    <div class="left">
        <div class="r">
            /everything/folderix/"><img src="/everything/folderix/folderix-anon.jpg" alt="Folderix" /></a><br />
            /everything/folderix/">Folderix</a> flash drive
        </div>
        <div class="min"></div>
    </div>
    <div class="left">
        <div class="r">
            /everything/izdal/karta-ptolemeya/"><img src="http://www.artlebedev.ru/everything/izdal/karta-ptolemeya/izdal-karta-ptolemeya-anon.jpg" alt="Ptolemy's Map" /></a><br />
            /everything/izdal/karta-ptolemeya/">Ptolemy&rsquo;s Map</a> by&nbsp;Herz Frank
        </div>
        <div class="min"></div>
    </div>
    <div class="left">
        <div class="r">
            /everything/ancor/site2/"><img src="/everything/ancor/site2/ancor-anon.jpg" alt="Ancor 2.0" /></a><br />
            /everything/ancor/site2/">Ancor website 2.0</a>
        </div>
        <div class="min"></div>
    </div>
    <div class="left">
        <div class="r">
            /everything/rigroup/"><img src="/everything/rigroup/rigroup-anon.jpg" alt="Rigroup" /></a><br />
            /everything/rigroup/">Rigroup</a> website
        </div>
        <div class="min"></div>
    </div>
    <div class="left">
        <div class="r">
            /everything/eksmo/panov-dragon-day/"><img src="/everything/eksmo/panov-dragon-day/panov-dragon-day-anon.jpg" alt="Day of the Dragon" /></a><br />
            /everything/eksmo/panov-dragon-day/">Day of&nbsp;the Dragon</a> by&nbsp;Vadim Panov
        </div>
        <div class="min"></div>
    </div>
    <div class="left">
        <div class="r">
            /everything/grain-holding/identity/"><img src="/everything/grain-holding/identity/grain-anon.jpg" alt="Grain Holding" /></a><br />
            /everything/grain-holding/identity/">Grain Holding</a> corporate identity
        </div>
        <div class="min"></div>
    </div>
</div>

Order a design...

Picture blocks with captions September 26, 2008

How it looks in the browser