Side Container Functionality

The side container system is made up of a couple of classes designed to work inside the #content div with other tags. Paragraphs, and other content, should float around them. They can theoretically contain any other tags, but their width is very limited (150 pixels minus the padding). Their main use is to allow you to have image titles and descriptions that are aligned with the image itself. Of course, the whole system is based on a width of 150 pixels. If you need a different size, simply make the change in the leftContainer and rightContainer classes. If you need several types of sizes, consider making some overloading classes.

Nullam posuere tristique sem. Donec augue leo, dignissim in, laoreet sit amet, aliquet et, purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eget felis eu mauris adipiscing pretium. Nunc purus magna, vestibulum quis, convallis faucibus, nonummy ac, odio. Donec eu odio. Proin eros nisi, fermentum eget, aliquam sit amet, congue id, augue. Donec fermentum convallis mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent mauris lorem, sagittis ultrices, venenatis iaculis, ultricies ac, quam. Pellentesque dapibus. Aenean venenatis erat ultricies ligula. Morbi quis lorem ut neque porta convallis. Cras commodo justo eget massa. Donec molestie.

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.

You can't insert these containers INSIDE a paragraph because they are based on divs. You can, however, have right and left side containers simultaneously.

Donec nisi. Quisque tincidunt eros sed tortor. Ut posuere, nunc quis cursus suscipit, urna metus molestie lectus, in malesuada leo sem sit amet diam. Suspendisse potenti. Nulla facilisi. Maecenas egestas mi non sem. Quisque id purus at mauris molestie congue. Nam vestibulum volutpat sapien. Vestibulum vulputate, augue eget volutpat cursus, ligula orci varius neque, in elementum tellus lorem eu dui. Aliquam dui arcu, pharetra ac, mattis id, fringilla eget, sem. Curabitur sapien enim, mattis id, fermentum vel, suscipit a, enim. Donec id orci a diam vulputate blandit. Nunc interdum fringilla eros. Mauris mi eros, rutrum condimentum, condimentum id, consectetuer id, urna. Sed sed orci. Proin scelerisque. Nullam porttitor vestibulum est. Integer varius diam eget odio. Praesent aliquet, lectus ac imperdiet volutpat, tortor velit pretium nulla, luctus varius tellus dui sit amet elit. Ut dignissim neque in ipsum.

In this page, you're seeing paragraphs inside the containers. They are centered and italicized. They are meant mainly for descriptions of images in the containers.

---

Relevant HTML

<div class="leftContainer"><p>Left Container</p></div>
<p>Nullam posuere tristique sem. Donec augue leo, dignissim in, laoreet sit amet, aliquet et, purus.</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;
}

---

« Back to Functionality Index