Welcome to the second part of a four-part series that shows you how to build floating lists with cascading style sheets. In the first part, you saw how to float two lists in a web document, one to the left and one to the right. You also saw that this particular approach caused a minor problem in Internet Explorer. In this part of the series, we'll show you how to fix that problem, and how to improve the look and feel of the lists.
Building Cross-Browser Floating Lists with CSS - A quick review (Page 2 of 4 )
As I stated in the beginning, creating a pair of floating HTML lists by using the “float” CSS property is indeed a no-brainer process; it only requires defining a container for the respective lists, which are floated respectively to the left and right sides of the web page.
The (X)HTML file below demonstrates the details of this process:
<!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 with CSS</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;
}
ul.rightlist{
float: right;
}
</style>
</head>
<body>
<h1>Basic example on building floating lists with CSS</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>
That was pretty simple to grasp, wasn’t it? As you can see, the above (X)HTML file uses a “float” CSS property to construct two floating lists in a sample web document. Of course, this introductory example can be easily extended, for instance, to work with three or more floating lists, depending on your personal needs.
In addition, the visual appearance of these floating lists is depicted in the following screen shot, which shows the output produced by Mozilla Firefox:
So far, so good. At this stage, you hopefully recalled how to build a couple of floating HTML lists by means of two basic CSS classes. I have to admit that the look of the lists is rather primitive and can definitely be improved.
Thus, with this idea in mind, in the following section I’m going to add some additional CSS styles to the previous (X)HTML file, with the purpose of making these floating lists look slightly more professional.
To learn how this will be achieved, please click on the link shown below and keep reading.
Style Sheets 
Building Floating Lists With CSS
