Home arrow Style Sheets arrow Adjusting Padding and Margins on Floating Lists with CSS

Adjusting Padding and Margins on Floating Lists with CSS

Welcome to the third part of a four-part series that shows you how to build side-by-side floating HTML lists with CSS. In this part, you'll learn how to make your lists look more professional by adjusting their padding and margin values. As always, we'll illustrate our explanations with plenty of code examples.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
December 17, 2008
  1. · Adjusting Padding and Margins on Floating Lists with CSS
  2. · A review of our cross-browser approach
  3. · Assigning padding, margins and widths
  4. · Controlling the indentation of bullets

print this article

Adjusting Padding and Margins on Floating Lists with CSS
(Page 1 of 4 )


Undeniably, HTML lists are an important part of modern web design. Nowadays they’re not only used for displaying bulleted items on a web document, but for wrapping several links into a logical group, in this way increasing their accessibility.

In either case, including vertical and horizontal lists into a web page is a straightforward process that can be mastered very quickly, and certainly without major headaches. However, things can get more complicated when it comes to building lists that need to be floated to the left or right sides of a web document, since they often require implementing a number of CSS approaches that, in certain cases, are not completely supported by some modern browsers.

But, if you think that creating floating HTML lists with CSS is a daunting task, you might be wrong. In this series of articles, you’ll be provided with a friendly guide to building these handy lists by using only a simple combination of CSS styles and structural markup.

Now that you’re well aware of the subject of this series, it’s time to refresh your memory of the topics I covered in the last article. In that specific tutorial, I discussed how to create a pair of floating HTML lists with CSS which were displayed consistently by many modern browsers, including Internet Explorer.

Basically, the approach I used to build the aforementioned list relied heavily on the utilization of the “float” CSS property, which helpfully floated the lists to the respective left and right sides of a web document.

However, I must admit that the visual appearance of these floating lists was rather primitive, thus in this third article of the series, I’ll be adjusting certain aspects of them, such as their respective padding and margin values, in this way improving generally their look and feel.

Are you ready to learn the full details of this styling process? Great, 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