Building Floating Lists With CSS - Creating the structural markup of the floating (X)HTML lists
(Page 3 of 4 )
In the previous section, I showed you all of the CSS styles required to build a couple of floating HTML lists, which can be easily included in any web document. However, I have to admit that this process is still incomplete, since it's necessary to create the structural markup of these lists.
Thus, taking into account this important requisite, below I defined a basic web document which contains the markup of two regular HTML lists, properly floated to the left and right of the document by using the CSS styles that you learned earlier.
Having explained that, here's how this primitive web document looks:
<!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>
</head>
<body>
<h1>Basic hands-on example on building floating lists</h1>
<div>
<ul>
<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>
<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>
So far, nothing unexpected, right? As you can see, the above web document includes two regular HTML lists that will be displayed on the browser following a regular order, that is the first one on top of the second one.
Of course, the way that the previous HTML lists are rendered by the browser will be better understood if you look at the following screen shot, which shows the output generated by Mozilla Firefox:
As you can see from the above image, the lists are displayed in a normal sequence. However, as I explained earlier, it's perfectly possible to use the CSS styles created in the previous section to turn these regular lists into two floating blocks, in this manner implementing floating lists.
Obviously, in this specific case, the first HTML list would be floated to the left of the web document by assigning to it the "leftlist" CSS class that you saw previously, while the second one would be positioned to the right by using the other "rightlist" class.
Nonetheless, all of the above explanations would be rather pointless if I don't show you a concrete example where you can see how these floating lists are finally constructed, by combining the structural markup of the prior web document and the CSS styles defined in the previous section.
Sounds pretty logical, right? Thus, I think this is the appropriate moment to move on and read the last section of this tutorial, where I'll be completing the creation of floating HTML lists with CSS.
What are you waiting for? Jump forward and read the next few lines! I'll be there, waiting for you.
Next: Completing the construction of floating lists >>
More Style Sheets Articles
More By Alejandro Gervasio
