Alt-Web Design & Publishing
CSS2 Floated Pictures & Captions
with Overflow: hidden

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 applies an Overflow: hidden rule to an outer #Container. Look here for an alternate method.

Float left

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.

Float Right

No project is too small

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

Method:

CSS2 Code

#Content {
overflow: hidden} /**clears floats**/

.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;
}

Earn money from your website with Lunarpages Affiliate Program.

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

</div>

Alt-Web Design & Publishing
CSS2 Floated Pictures & Captions
with Overflow: hidden

Description:

Float left

Float Right

Method:

CSS2 Code

XHTML Code

Demos:

CSS Templates:

Help Feed the Kitty

Alt-Web Design & Publishing CSS2 Floated Pictures & Captions with Overflow: hidden

Description:

Float left

Float Right

Method:

CSS2 Code

XHTML Code

Demos:

CSS Templates:

Help Feed the Kitty

Alt-Web Design & Publishing
CSS2 Floated Pictures & Captions
with Overflow: hidden