Home arrow Style Sheets arrow Page 2 - Building Floating Lists With CSS

Building Floating Lists With CSS

In this four-part series of articles Iím going to show you how to build several floating HTML lists by means of a few basic CSS styles, and basic markup. In this manner you can implement this useful approach within your existing or future web sites. This is the first part.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
December 03, 2008
  1. · Building Floating Lists With CSS
  2. · Building floating (X)HTML lists
  3. · Creating the structural markup of the floating (X)HTML lists
  4. · Completing the construction of floating lists

print this article

Building Floating Lists With CSS - Building floating (X)HTML lists
(Page 2 of 4 )

In accordance with the concepts I expressed in the introduction of this tutorial, one of the easiest ways to include a couple of floating lists into a given web document consists of using a simple "float" CSS property. We'll use this property to float the first list to the left of the document in question and place the second list to the right.

It's quite probable that at this point you'll be wondering how the previous process can be put into practice. Below I coded two basic CSS classes. They are responsible for floating the two aforementioned HTML lists to the left and right of a given web document.

The corresponding CSS code looks like this:


padding: 0;

margin: 0;

background: #fff;



font: bold 18pt Arial, Helvetica, sans-serif;

color: #000;



width: 70%;



float: left;



float: right;


As you can see, aside from styling the respective "body" and "h1" selectors of the pertinent web page, I defined two basic CSS classes -- called "leftlist" and "rightlist" -- which are tasked with floating the respective HTML lists to the left and the right sides of the web page in question via the "float" CSS property.

Also, I created an additional "listcontainer" selector, which will come in handy for wrapping the pertinent lists into a single containing DIV.

Well, so far everything looks good, right? At this stage, hopefully you grasped the logic that stands behind building two simple floating lists by means of a few CSS styles, since the entire procedure is reduced to positioning the lists in question via the "float" property. Period.

So, what's the next step? Now that you've seen how the previous CSS styles look, it's time to incorporate the corresponding markup of the floating lists, so you can see more clearly how they can be floated to the left and right sides of a web document.

To learn the complete details of this process, please click on the link that appears below and keep reading.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials