Home arrow Style Sheets arrow Combining Floating Lists with Other Web Page Elements

Combining Floating Lists with Other Web Page Elements

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
December 23, 2008
  1. · Combining Floating Lists with Other Web Page Elements
  2. · Using a floating HTML list with other web page elements
  3. · Polishing the appearance of the sample (X)HTML file
  4. · Seeing the recently styled HTML lists

print this article

Combining Floating Lists with Other Web Page Elements
(Page 1 of 4 )


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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials