CSS Floats:Online Shop Catalog

The Freiburg to Titisee train winds its way up through the Black Forest in Southern Germany.

A view of Feldsee from Feldberg, at 1497m the highest peak in the Black Forest.

The beautiful Konigsee near Berchtesgaden in the Bavarian Alps.

Walking into the future in the Fôret de Flines in Northern France.

<html>
   <head>
      <style>
         .catframe{
            position:absolute;
            border-width:0.05em;
            left:40em;top:10em;
            height:22.8em;width:20em}
         .catimg,.catinf{
            float:left;
            width:5em;
            height:5em;
            padding-top:0.2em;
            padding-bottom:0.5em}      
         .catimg{
            background-color:green}
            .catinf{
               width:14.2em;
               padding-left:0.4em
               padding-right:0.4em}
               </style>
   </head>
   <body>
      <div class="catframe">
        <img class="catimg" src="im1.png"/>
        <div class="catinf">The Freiburg...</div>
        <div class="catinf">A view of...</div>
        <img class="catimg" src="im2.png">
        <img class="catimg" src="im3.png"/>
        <div class="catinf">The beautiful...</div>
        <div class="catinf">Walking into...</div>
        <img class="catimg" src="im4.png"/>
    </div>
  </body>
</html>

A commonly used screen layout for online shopping catalogs - an image of the product being sold alongside a brief description. True catalogs would have additional options, such as a Buy button.

The image and description elements are both floated left.
Note the green bands above & below the images. The width of the upper band is smaller, 0.2em, while that of the lower is bigger, 0.2 + 0.5em

▼Jump To...

◄ ►