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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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.
Next: Assigning padding, margins and widths >>
More Style Sheets Articles
More By Alejandro Gervasio
