In the past, designing pages like this would have required the use of a table. By using CSS, we can achieve the same design in a way that is much more compliant. The images in the examples below are contained in DIV's which are floated. The paragraphs flow around the DIV's. When doing designs like this, classes rather than ID's are advised since there might be several images on the page, and classes can be used for multiple elements in a page.
Image and Caption
In the example below, the image is floated right and the content area width is set to the image width.
To make space between the container and the surrounding text, margins are declared for the right, bottom and left.
10 pixels of padding are added on each side of the image.
The adjacent paragraph text (which has been set to justify) wraps around the floated image.
Styles used in this example
div.imagecaption {
float: right;
width: 200px;1
margin: 0 1em 1em;
padding: 10px;2
text-align: center; font-style: italic; color: black;3
border: 4px solid green;4
}
1content area width equals image width
Clouds in Los Altos.
This demonstrates how you can use CSS to create an effect similar to using a table cell in HTML 3.2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue. Donec sagittis tortor eget libero fermentum dignissim. Quisque et lorem. Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus. Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum. Nam laoreet mauris sed risus. Vivamus felis. Donec viverra. Nullam vitae arcu. Mauris at mauris. Praesent elit eros, accumsan a, vehicula et, eleifend quis, mi. Morbi magna neque, luctus vitae, interdum quis, ultricies et, nisi. Curabitur malesuada ullamcorper diam. Nam tempus, dui ut elementum vestibulum, urna justo blandit elit, et viverra nulla ipsum at libero. In turpis tortor, semper vitae, fermentum vitae, eleifend semper, erat. Vivamus quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mattis, justo vel auctor placerat, mi nisl viverra dui, sed tempor ante diam vel libero. Etiam metus leo, condimentum sed, tempor ut, tincidunt ac, ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet eleifend tortor. Nulla metus. Mauris tristique sem sed elit. Ut non lectus pretium lorem varius facilisis.
In the example below, we have a double float. The entire image & caption combination is floated right, and the image is also floated right so that the caption will appear on the left.
Styles used in example below
div.imagecaption2 {
float: right;
width: 350px;
margin: 0 1em 1em 1em;
padding: 10px;1
border: 4px solid green;2
background-color: #036;
font-style: italic; font-size: 1em; color: yellow;3
}
div.imagecaption2 img {
float: right;
margin-left: 1em;
border: 2px ridge #fff
}
1padding to create space around image and caption
Side by Side Image and Caption
Clouds in Los Altos.