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">
<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 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.
Next: Styling list bullets >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
