Building Floating Lists With CSS - Building floating (X)HTML lists
(Page 2 of 4 )
In accordance with the concepts I expressed in the introduction of this tutorial, one of the easiest ways to include a couple of floating lists into a given web document consists of using a simple "float" CSS property. We'll use this property to float the first list to the left of the document in question and place the second list to the right.
It's quite probable that at this point you'll be wondering how the previous process can be put into practice. Below I coded two basic CSS classes. They are responsible for floating the two aforementioned HTML lists to the left and right of a given web document.
The corresponding CSS code looks like this:
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;
}
As you can see, aside from styling the respective "body" and "h1" selectors of the pertinent web page, I defined two basic CSS classes -- called "leftlist" and "rightlist" -- which are tasked with floating the respective HTML lists to the left and the right sides of the web page in question via the "float" CSS property.
Also, I created an additional "listcontainer" selector, which will come in handy for wrapping the pertinent lists into a single containing DIV.
Well, so far everything looks good, right? At this stage, hopefully you grasped the logic that stands behind building two simple floating lists by means of a few CSS styles, since the entire procedure is reduced to positioning the lists in question via the "float" property. Period.
So, what's the next step? Now that you've seen how the previous CSS styles look, it's time to incorporate the corresponding markup of the floating lists, so you can see more clearly how they can be floated to the left and right sides of a web document.
To learn the complete details of this process, please click on the link that appears below and keep reading.
Next: Creating the structural markup of the floating (X)HTML lists >>
More Style Sheets Articles
More By Alejandro Gervasio
