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 align="center">
<!-- container -->
<div style="width: 470px;">

<!-- titles -->

<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>
<!-- pictures -->
<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>
<p class="float_thumb_3_120"><img src="URL of picture 3"
style="width: 120px; height: 90px;"></p>

</div>
</div>


The Pictures with Titles



Schenk
Les Experts du Vin

Schenk
Asia

Obrist
Les Artisans du Vin

Schenk Les Experts du Vin

Schenk Asia

Obrist Les Artisans du Vin



Loading the supplemental Style Sheet


  • As GPC remove the standard tag to add a style sheet :

<link rel="stylesheet" type="text/css" href="URL of the supplemental style sheet">
  • We need to write a little Javascript in the first editable section of the page :

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/float_box_style.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for floating box';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>




More Informations



Other Examples





Using GPC