CSS2 Floating 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

Your caption text

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.

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

Right Float

Your caption text

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

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">
<p><a href="#"><img src="your-image.jpg" alt="" width="" height="" title="" /></a>
<br />
Your caption text goes here </p>
</div>

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

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

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

CSS2 Floating Pictures

with Captions

Description:

left float

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

Right Float

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

Method:

CSS2 Code

XHTML Code

Related Links: