Side Container Header Functionality
In Perfect Layout, there are also styles for an image title within the side container with the use of the h3 tag.
Image Title
Image description.
Suspendisse mauris. Pellentesque fringilla ipsum in pede. Aliquam consequat. Curabitur consectetuer, lectus quis porttitor elementum, massa augue ultrices est, at pretium quam ligula at lorem. Vivamus mollis pharetra lacus. Curabitur metus odio, suscipit quis, nonummy at, sagittis quis, leo. Sed in justo eu leo tristique tristique. Duis lectus ante, tristique at, iaculis eu, accumsan vel, nunc. Nullam ut erat. Aenean et purus id enim ultrices lobortis. Fusce ac sem. Proin sit amet massa. Suspendisse potenti. Integer quis lorem. Pellentesque lorem. Proin pulvinar tincidunt lacus. Phasellus enim felis, faucibus ut, faucibus in, cursus in, ante. Mauris porttitor elementum risus. Nullam turpis. Nunc consectetuer imperdiet tellus. Integer suscipit euismod purus. Morbi et neque a lacus ultricies imperdiet. Sed venenatis. Maecenas iaculis nulla id felis. Vestibulum blandit. Sed a turpis. Sed sit amet dui. Aliquam scelerisque, augue et condimentum eleifend, mauris dolor porta sem, vel rhoncus enim neque sed urna. Vivamus velit magna, vulputate et, feugiat ac, gravida vel, eros. Phasellus accumsan, augue vitae pharetra suscipit, felis justo mattis lacus, vitae pretium tortor mauris vitae lectus. Mauris nonummy. Proin vitae mi sed ligula interdum lacinia. Etiam volutpat. Proin pulvinar justo sed tellus. Mauris ac eros sed pede suscipit blandit. Aenean volutpat fermentum tortor. Phasellus gravida. Nunc arcu est, blandit ut, vulputate nec, suscipit nec, lorem. Maecenas metus magna, tristique a, fermentum at, lacinia sed, metus. In accumsan mattis orci. Proin orci justo, euismod ac, egestas ut, dignissim sed, augue. Morbi convallis iaculis magna.
Relevant HTML
<div class="leftContainer"> <h3>Image Title</h3> <img src="../images/image.jpg" alt="Sample Image" /> <p>Image description.</p> </div> <p>Suspendisse mauris. Pellentesque fringilla ipsum in pede. Aliquam consequat.</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 h3, #content .rightContainer h3
{
padding:0 0 0.3em 0;
text-align:center;
}