Side Container Blockquote Functionality
One final use of side containers is a method for showing pull quotes on the side of the paragraphs they are referring to. To use this feature, place a blockquote tag inside one of the side containers. Remember, you must use paragraphs (or other allowed tags) inside the blockquote tags in order to validate.
This is a pull quote.
Mauris malesuada, mi eget faucibus feugiat, metus diam sagittis est, eget tempus libero dolor vel erat. Quisque cursus cursus sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam neque dolor, hendrerit quis, accumsan at, mollis vel, odio. Pellentesque non dolor. Proin augue urna, tincidunt quis, lobortis et, dictum a, sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum malesuada urna eget sem. Donec a tellus. Ut nec nunc. Quisque pede lectus, ultrices nec, interdum quis, pulvinar non, metus. Fusce vestibulum. Curabitur est justo, commodo a, dignissim nec, dignissim id, mi. Ut quis ante. Donec fermentum, orci eget fermentum pellentesque, pede dolor egestas sem, non pharetra orci nunc at libero. Proin dignissim urna at orci. Aliquam accumsan vestibulum tortor. In eu erat. Nulla facilisi.
Relevant HTML
<div class="rightContainer"><blockquote><p>This is a pull quote.</p></blockquote></div> <p>Mauris malesuada, mi eget faucibus feugiat, metus diam sagittis est, eget tempus libero dolor vel erat.</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 blockquote, #content .rightContainer blockquote
{
padding:0;
}
#content .leftContainer blockquote p, #content .rightContainer blockquote p
{
text-align:left;
}