Titles for Pictures

CSS to create floating box

Width of picture : 120 px, border 1 px (total width = 122)

Create a floating box and define the style for text and border :

.float_thumb_3_120 {
float: left;
width: 122px;
margin-left: 14px;
margin-right: 14px;
margin-bottom: 1px;
padding: 0px;

font-family: arial, sans-sherif;
font-size: 8pt;

border-style: solid;border-width: 1px;border-color: #d1dae3;

}

Width of container

Compute the width of the container :

n1 = 3 * ((width of pic + border) + margin-left + margin-right)

n2 = margin-left

n = n1 + n2

Here we get :

n1 = 3 *((120 + 2) + 14 + 14) = 450
n2 = 14

n = 464

The HTML

Use this html at the position of the pictures :

<div style="width: 470px;">



<p class="float_thumb_3_120" style="border-color: #7da7fc">
Some text for pic 1</p>

<p class="float_thumb_3_120" style="border-color: #7da7fc">
Some text for pic 2</p>

<p class="float_thumb_3_120" style="border-color: #7da7fc">
Some text for pic 3</p>

<p class="float_thumb_3_120"><img src="URL of picture 1"
style="width: 120px; height: 90px;"></p>

<p class="float_thumb_3_120"><img src="URL of picture 2"
style="width: 120px; height: 90px;"></p>