Multi-column Text Display Using CSS

Lorem ipsum dolor sit amet consectetuer Aenean metus natoque nisl justo. Vestibulum ac eget Integer euismod elit orci amet tortor sem nibh. Orci Morbi cursus elit ridiculus Aliquam massa elit fringilla neque et. Sapien Nulla ut id Vestibulum commodo mauris malesuada dictumst id leo. Ipsum auctor lobortis faucibus neque Suspendisse Morbi volutpat sit morbi ac. In ipsum et ridiculus elit Fusce natoque et eget velit.

Tortor lacus parturient eros elit laoreet amet id Aliquam dolor enim. Accumsan Pellentesque pede et egestas quis nec augue Vestibulum Morbi lobortis. Tincidunt eu lobortis in eget sapien convallis ac quis Donec Curabitur. Nisl libero Vestibulum at Donec platea arcu consequat consectetuer vel elit. Tempor ac sed ut eget elit laoreet vitae nunc Nunc rutrum. Et fermentum magna id dui id nisl dolor.

<html>
   <head>
      <style>
         .catframe{position:absolute;border-width:0.05em;left:40em;
                       top:10em;height:22.8em;width:20em}
         .colone,.coltwo{float:left;width:6.5em;height:21.8em;
                              padding:0.5em;overflow:hidden}
        .coltwo{width:11.45em;border-left-style:inset;
                   border-left-width:0.05em;border-left-color:#EE8875}
         .colthree{float:right;width:4em;height:4em;
                      padding-left:0.5em}
      </style>
   </head>
   <body>
      <div class="twocols">
         <div class="colone">
            <pre>Lorem ipsum...</pre>
         </div>
         <div class="coltwo">
            <img class="colthree" src="eye.png"/>    
           <pre>Tortor lacus...</pre>
         </div>
      </div>
   </body>
<html>

Note how width, border-width and padding contribute to the total width
Note the way nested floats can be used to create complex layouts. The picture - showing a lone offroader in the desert near Dubai - is floated right in a column that is floated left.
The overflow:hidden; setting is important. Without it the floated contents will spill out of their container.

Lorem Ipsum is standard dummy text used by printers & typesetters. It has been in use for almost 500 years. Read more about it here. The PSPad tools menu has a Lorem Ipsum generator.

▼Jump To...

◄ ►