Combining Floating Lists with Other Web Page Elements
(Page 1 of 4 )
In the first three parts of this four-part series, we focused pretty closely on floating lists: getting them to float to the correct places, styling them so that they look more professional, and so forth. In this fourth and final part, however, we're going to make our floating lists play nicely with other web page elements. Keep reading to learn how.
Introduction
If you’re a web designer who builds web sites using many of the design techniques that have emerged in the last few years, then it’s quite possible that you’ve already worked with HTML floating lists. As you know, aside from being used to group bulleted items vertically and horizontally, lists can be easily floated to the left and right sides of a web document as well. This comes in handy for polishing the way that contents are displayed to end users.
There are many methods that can be used to construct floating lists in HTML. Obviously, each of them has their pros and cons. However, if you start reading this series of articles, you’ll be provided with an approachable guide that will walk you through the process of creating floating HTML lists, by using only the “float” CSS property. This means that you shouldn’t have major problems grasping the logic that drives this technique.
At this moment, and having introduced you to the main subject of this article series, let me briefly review the themes that I discussed in the last installment. Essentially, in the course of the preceding tutorial, I showed you how to improve the visual appearance of a pair of floating lists, including fine adjustments to their padding, margin values, and widths.
The purpose in doing this was simply to provide the lists with a more consistent and appealing look. As you may guess, when it comes to styling web page elements, this process usually relies on personal preferences; obviously, this particular technique isn't an exception.
Nevertheless, even though you should be pretty familiar with building floating HTML lists with CSS by now, I have not shown you how to use them in conjunction with other web page elements. Thus, in this last chapter of the series I’m going to provide you with some examples that will show you how to create web documents that incorporate not only floating HTML lists, but some additional paragraphs as well.
Ready to tackle this final installment? Let’s begin now!
Next: Using a floating HTML list with other web page elements >>
More Style Sheets Articles
More By Alejandro Gervasio
