CSS2 Floated Pictures with Captions
Description:
CSS floats allow main content text to wrap around images. With a bit of added CSS, the images have their own captions, too.left float
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.
Right Float
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:
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%;
}
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>
<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>
Related Links:
