Side Container Image Functionality
The main use of side containers is to allow for images, and corresponding text descriptions, to be incorporated into documents. Text and other elements should wrap around these. As you can see, inserting an image into a side container is no different from just inserting an image with one of the image positioning classes.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ac dolor eu nunc nonummy gravida. In hac habitasse platea dictumst. Donec dapibus viverra sapien. Donec nec augue eget dolor tempus pretium. Quisque ipsum dui, eleifend at, euismod a, faucibus non, nibh. Mauris lorem. Pellentesque dictum, nunc nec eleifend luctus, urna risus fermentum ligula, quis sollicitudin ipsum tellus nec ipsum. Quisque iaculis, nibh in sagittis blandit, eros massa euismod nisl, vel porttitor tellus tortor gravida lectus. Nulla venenatis. Vivamus lobortis. Duis faucibus lobortis ante. Praesent sit amet justo a elit tincidunt placerat. Nunc hendrerit nibh et tellus. Phasellus blandit ante in augue. Fusce pretium. Aenean enim pede, malesuada mollis, lobortis eget, ullamcorper id, tellus. Proin gravida vulputate metus. Morbi vehicula arcu et elit. Aliquam eget nisi. Fusce fermentum consectetuer sem. Vestibulum lectus. Sed ut nisl blandit tellus ullamcorper dapibus. Phasellus augue. Curabitur ante lacus, sagittis eu, auctor sed, pharetra eu, mi. Ut eget urna in leo auctor pharetra. Etiam porta, diam in volutpat congue, massa erat vestibulum est, facilisis posuere diam tortor et odio. Mauris sapien.
The real strength of these side containers is to allow for image descriptions that are lined up with the image.
Image description.
Proin accumsan odio nec nulla. Integer lacus eros, cursus non, mattis vitae, tristique vitae, augue. Cras a est. Integer metus urna, fringilla a, varius vel, fringilla a, purus. Nulla ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam vel nisi. Integer feugiat. Suspendisse mauris dui, accumsan et, fermentum ac, auctor id, massa. Phasellus egestas, velit ut faucibus aliquam, augue elit tincidunt lorem, non tristique pede nulla nec nibh. Nunc tellus. Mauris malesuada, mi sit amet tincidunt hendrerit, ipsum magna pretium urna, nec vestibulum felis leo a quam. Donec ac libero. Duis dapibus sodales sem. Duis pharetra, diam malesuada imperdiet laoreet, eros urna ornare lectus, nec malesuada metus mauris eget arcu. Phasellus sit amet metus. Quisque consequat, nulla eget dictum pulvinar, magna diam consectetuer sapien, at auctor nulla erat id nibh. Donec scelerisque tellus at ipsum. Sed egestas aliquet tellus. Vestibulum dignissim eleifend justo. Nullam egestas dictum lacus. Donec ornare, quam id dapibus eleifend, magna nulla rhoncus est, sit amet pretium ipsum nisl eu tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dignissim arcu vitae velit. Morbi placerat, turpis in fringilla ullamcorper, sem dolor faucibus magna, vitae nonummy felis tellus in ante. Mauris suscipit. Phasellus bibendum neque eget dui. Vivamus quam lorem, dapibus ut, aliquam ut, pharetra in, purus. Vivamus erat orci, lacinia non, laoreet a, pulvinar ut, ipsum. Nunc mi. Donec tempus. Mauris consequat massa vitae nunc. In pellentesque, massa sed commodo faucibus, ligula lectus interdum tellus, tincidunt pharetra nisi risus et turpis. Sed sed magna. Vivamus elit. Nunc commodo laoreet orci.
Relevant HTML
<div class="rightContainer"> <img src="../images/image.jpg" alt="Sample Image" /> <p>Image description.</p> </div> <p>Proin accumsan odio nec nulla. Integer lacus eros, cursus non, mattis vitae, tristique vitae, augue. Cras a est.</p>
Relevant CSS
.leftContainer
{
padding:0 10px 0 0;
clear:left;
float:left;
width:150px;
}
.rightContainer
{
padding:0 0 0 10px;
clear:right;
float:right;
width:150px;
}
#content .leftContainer p, #content .rightContainer p
{
padding:5px 0 5px 0;
text-align:center;
font-style:italic;
}
.leftContainer img, .rightContainer img
{
padding:0 0 5px 0;
}