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.
Adjusting Padding and Margins on Floating Lists with CSS - A review of our cross-browser approach (Page 2 of 4 )
Before I start teaching you how to improve the visual appearance of the floating HTML lists built in the previous tutorial of the series, I’d like to spend a few minutes listing the complete definition of the (X)HTML file required to create them, as it was defined in the article.
That being explained, here’s the full signature of the file in question, so have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Basic example on building floating lists</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#listcontainer{
width: 70%;
}
ul.leftlist{
float: left;
list-style-position: inside;
list-style-type: square;
}
ul.rightlist{
float: right;
list-style-position: inside;
list-style-type: square;
}
</style>
</head>
<body>
<h1>Basic example on building floating lists</h1>
<div id="listcontainer">
<ul class="leftlist">
<li>This is the list item 1, floated to the left.</li>
<li>This is the list item 2, floated to the left.</li>
<li>This is the list item 3, floated to the left.</li>
<li>This is the list item 4, floated to the left.</li>
<li>This is the list item 5, floated to the left.</li>
</ul>
<ul class="rightlist">
<li>This is the list item 1, floated to the right.</li>
<li>This is the list item 2, floated to the right.</li>
<li>This is the list item 3, floated to the right.</li>
<li>This is the list item 4, floated to the right.</li>
<li>This is the list item 5, floated to the right.</li>
</ul>
</div>
</body>
</html>
If you examine in detail the definition of the above (X)HTML file, then you’ll surely recall how easy it is to build a pair of floating HTML lists using only a couple of CSS classes and basic structural markup. As you can see, the pertinent lists are floated to the left and right sides of the web document via the helpful “float” CSS property, meaning that you shouldn’t have major problems understanding how this technique functions.
So far, so good, right? At this point, you should be very familiar with the approach that I explained to you a few lines above, with reference to constructing floating HTML lists using a few CSS styles.
Nevertheless, as I expressed in the introduction, the visual appearance of these lists is still pretty primitive, and there are certain details that definitely need to be fine-tuned, including the lists’ margins, padding values and widths.
Therefore, in the following section, I’m going to assign specific values to the aforementioned CSS properties of the floating lists, with the purpose of making them look more appealing.
To learn how this styling process will be performed on the previous floating lists, please click the link that appears below and read the next few lines.
Style Sheets 
Building Floating Lists With CSS
