Alt-Web Design & Publishing
CSS2 Floated Pictures & Captions
with Horizontal Rule for Clearing

Description:

CSS floats allow main content text to wrap around images. With a bit of added CSS, the images have their own captions, too. This demonstration uses a horizontal rule to clear both floats. Look here for an alternate clearing method.

float Left

orange kitten playing with planet Earth
No project is too small

Your text goes here which wraps around the .LeftCaptions container.

Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.

Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.

Here we use an <hr> tag with a clearing class to clear both floats.

Float Right

orange kitten playing with planet Earth
No project is too small

Your text goes here which wraps around the .RightCaptions container.

Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.

Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.

Here we use an <hr> tag with a clearing class to clear both floats.

Method:

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS2 Code

.RightCaptions {/** container **/
float: right;
width: 25%;
height:auto;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;}

.LeftCaptions {/** container **/
float: left;
width: 25%;
height:auto;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;}

.RightCaptions p, .LeftCaptions p {/** text captions **/
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;}

.clearingdiv {/** to clear floats after they are not needed **/
clear:both;
height:1px;
width:100%;}


Lunarpages.com Web Hosting

XHTML Code

<div class="LeftCaptions"><!--begin leftCaptions -->
<p><a href="#"><img src="your-image.jpg" alt="" width="" height="" title="" /></a>
<br />
Your caption text goes here </p>
</div><!--end leftCaptions -->

<p>Your main text goes here which wraps around the .LeftCaptions container. </p>

<hr class="clearingdiv" /> <!--clear floats -->

<div class="RightCaptions"><!--begin RightCaptions -->
<p><a href="#"><img src="your-image.jpg" alt="" width="" height="" /></a> <br />
Your caption text goes here </p>
</div><!--end RightCaptions -->

<p>Your main text goes here which wraps around the .RightCaptions container. </p>

<hr class="clearingdiv" /> <!--clear floats -->

 

    bookmarks