Adjusting Padding and Margins on Floating Lists with CSS
(Page 1 of 4 )
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.
Introduction
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!
Next: A review of our cross-browser approach >>
More Style Sheets Articles
More By Alejandro Gervasio
