Pushing Web Page Columns with the Blueprint CSS Framework
If you're looking for an appealing CSS framework that lets you build web pages using a grid-based approach, keep reading. This article is part of a series that shows you how to use the Blueprint CSS framework. In this part, you'll learn how to use a function that lets you shift one or more columns of a web document.
Pushing Web Page Columns with the Blueprint CSS Framework - Review: working with the prepend-x and append-x CSS classes (Page 2 of 4 )
In case you still have some gaps in your knowledge of using the “prepend-x” and “append-x” CSS classes included with Blueprint CSS together, in the next few lines I listed the example developed in the previous article of this series. In that example, these classes were used together to build a sample web page layout comprised of three main columns that had the same padding values.
Here’s how this particular example looked originally:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-6 prepend-1 append-1">
<h2>This section spans 8 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-6 prepend-1 append-1">
<h2>This section spans 8 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-6 prepend-1 append-1 last">
<h2>This section spans 8 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-24">
<h2>This section spans 24 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
As you’ll probably recall, when used in conjunction, the “prepend-x” and “append-x” classes allow you to assign a predefined number of grid units at the beginning and the end of a selected column within a web page. As the above example shows, in this case the classes aggregate only one grid units to each side of the main columns, setting an evened padding for them. It's also possible, however, to add multiple units, always in perfect alignment with the background grid.
All in all, now that you've hopefully recalled how to work simultaneously with the aforementioned “prepend-x” and “append-x” classes, the next topic that I’m going to discuss will be the use of another generic class given by Blueprint CSS, called “push-x.”
This class, as one would imagine, can be used for pushing a targeted element to the left in the web document. This can be helpful for indenting images, paragraphs, lists and so forth. Therefore, in the following segment I’m going to set up another code sample for you, which will illustrate how to use these handy classes in a concrete case.
Now, jump forward and read the next section. It’s only one click away.
Style Sheets 
Controlling Column Padding with the Blueprint CSS Framework
