Left & Right Image Positioning Functionality

If you have a desire to place images on the right side of the page, simply add the rightImage class to the image, like so:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas in neque. Vivamus posuere, purus eget vehicula aliquam, nunc massa vulputate justo, imperdiet posuere odio orci eu tortor. Sed pulvinar ullamcorper purus. Etiam et lectus. Mauris nec augue et lorem ultrices interdum. Pellentesque in metus rhoncus nulla condimentum tincidunt. Aliquam justo. Donec rutrum scelerisque nibh. Suspendisse hendrerit elit ut nisi varius porta. Aenean vehicula imperdiet augue. Curabitur in orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam nec eros. Morbi commodo neque quis risus. Sed malesuada tortor vitae nisi. Aliquam erat volutpat. Phasellus venenatis, orci vel consequat congue, sem pede imperdiet pede, aliquam suscipit ipsum nisi ornare elit. Vivamus imperdiet risus ut metus tristique rutrum. Suspendisse commodo varius erat. Maecenas tortor sem, interdum vitae, pellentesque venenatis, dictum in, quam. Etiam rhoncus. Vestibulum sed mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vel sem.

The classes leftImage and rightImage are simple ways to have a bit more control over your image placement. The leftImage class works identically to having no class at all on an image, except for one addition, which also applies to the rightImage class. leftImage is cleared left and rightImage is cleared right, which means that two images that are close to each other on the same side will not interfere with each other and mess up your layout. First of an example without using leftImage:

Integer quis nulla. Maecenas lacinia, turpis non condimentum luctus, augue augue malesuada velit, vitae malesuada elit diam sit amet turpis. Nulla facilisi. Sed sagittis pede sed velit elementum interdum. Maecenas sem. Morbi dapibus tristique dolor. Donec pellentesque varius purus. Donec erat enim, varius aliquam, consectetuer ac, faucibus a, nisi. Cras tincidunt, quam eu suscipit dignissim, nisi diam mollis diam, in sodales elit risus in ipsum. Donec tellus. Duis sollicitudin, justo viverra consequat ultrices, orci eros adipiscing neque, id congue orci arcu id orci. Aliquam erat volutpat. Maecenas mollis magna vel turpis vestibulum ullamcorper. Aenean mattis, ligula a aliquet facilisis, leo elit lacinia nulla, quis venenatis velit nisl nec purus. Praesent iaculis, urna a mattis hendrerit, purus risus convallis nisi, nec pretium metus nisi vitae eros. Donec porta. Maecenas neque justo, vestibulum id, pretium eget, egestas id, diam. Suspendisse consequat lorem in leo. Donec vel risus congue sem suscipit imperdiet. Nullam sodales luctus felis. Morbi ultricies porttitor dolor. Proin a neque a turpis cursus fringilla. Cras lacinia. Donec et mauris sed turpis nonummy semper. Vivamus elementum dolor non leo. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In quis eros. Duis eleifend. Maecenas tempor tempor diam. Maecenas quis orci. Etiam et ligula vitae dolor convallis tincidunt. Sed tincidunt sapien eu sem. Proin leo lorem, pharetra id, scelerisque et, vestibulum vitae, metus.

And now, with leftImage applied:

Much better!

What if you want to have two images that are on opposite sides? No problem, just apply the appropriate styles and...

Just be careful that your images aren't so large that they squeeze all the text out of the way when the window size is at its smallest. Next, you should be aware that placing a right aligned image inside a paragraph is also permissible, but remember to apply the topPadding class:

Etiam interdum. Maecenas eros tortor, lobortis quis, euismod ut, auctor quis, tortor. Etiam egestas urna nec erat. Morbi sit amet nisl. Nam mattis, nisl nec fermentum fermentum, nisi sapien varius magna, at volutpat libero orci quis lacus. Nam tristique. Donec eget velit. Aenean felis libero, dignissim eget, condimentum eget, blandit sed, massa. Suspendisse eu ipsum. Ut elit metus, blandit et, molestie vestibulum, tincidunt ac, turpis. sample image Mauris quis nunc. Nulla cursus fermentum nisl. Suspendisse augue. Ut volutpat consequat felis. Quisque quis nunc. Aliquam dignissim, ligula non congue aliquam, tortor nunc tincidunt ligula, id consectetuer pede lacus at neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer malesuada aliquam nisi. Donec commodo fermentum metus. Vestibulum erat metus, laoreet mattis, semper sed, consequat id, augue. Integer in enim a eros lacinia molestie. Nullam eget lectus. Sed dapibus diam ut dolor. Duis mattis. Sed id turpis. Aliquam in mi a nisl porttitor interdum. In volutpat venenatis dui. In mauris leo, vehicula vel, varius et, hendrerit vitae, enim. Donec sit amet nisl. Sed nunc pede, iaculis nec, pharetra vel, laoreet in, lectus. Vivamus gravida augue mattis neque. Vivamus at est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed leo orci, pretium ac, rhoncus vel, iaculis nec, sem. Praesent hendrerit blandit lorem. Nunc consequat tincidunt metus. Maecenas molestie sem nec nibh. Integer non risus. Sed lorem ligula, laoreet ut, blandit a, euismod sed, orci. Suspendisse commodo. Nam tempus molestie justo. Etiam accumsan. Suspendisse non arcu. Phasellus tristique dictum sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque turpis risus, accumsan sed, cursus ut, dictum vel, risus. Cras elit ligula, mollis non, bibendum eu, malesuada at, augue. Aliquam erat volutpat. Phasellus tempus adipiscing nulla. Proin vestibulum elit id urna.

Relevant HTML

<!-- Paragraph wrapping around an image. -->
<img src="../images/image.jpg" alt="sample image" class="rightImage" />
<p>A paragraph to wrap around the image.</p>

<p class="clearBoth">If the paragraph doesn't wrap all the way around the image, you'll have to use the clearBoth class on the next element.</p>

<img src="../images/image.jpg" alt="sample image" class="leftImage" />
<img src="../images/image.jpg" alt="sample image" class="rightImage" />
<p>The two images are on the left and right sides of this paragraph.</p>

Relevant CSS

.leftImage
{
	padding:0 10px 10px 0;
	clear:left;
	float:left;
}

.rightImage
{
	padding:0 0 10px 10px;
	clear:right;
	float:right;
}

.topPadding
{
	padding-top:1em;
}

« Back to Functionality Index

Perfect Layout

Version 1.0 Beta

Left & Right Image Positioning Functionality

Relevant HTML

Relevant CSS