Combining Floating Lists with Other Web Page Elements
In the first three parts of this four-part series, we focused pretty closely on floating lists: getting them to float to the correct places, styling them so that they look more professional, and so forth. In this fourth and final part, however, we're going to make our floating lists play nicely with other web page elements. Keep reading to learn how.
Combining Floating Lists with Other Web Page Elements - Using a floating HTML list with other web page elements (Page 2 of 4 )
In accordance with the concepts that I deployed in the introduction, my humble plan consists of demonstrating how a couple of HTML lists can be utilized in conjunction with other web page elements. First I’m going to create a sample web page that will contain some trivial paragraphs, and then a pair of floating lists will be embedded into the page in question.
Now that I have explained how this example is going to function, please focus your attention on the following (X)HTML file. It shows how construct a basic web document that displays the paragraphs along with the floating lists. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Basic example on using floating lists in conjunction with paragraphs</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#container{
width: 1000px;
}
ul.leftlist{
float: left;
width: 350px;
position: relative;
padding: 10px 20px;
margin: 0 0 15px 0;
list-style-position: inside;
list-style-type: disc;
background: #eee;
border: 1px solid #999;
}
ul.rightlist{
float: right;
width: 350px;
position: relative;
padding: 10px 20px;
margin: 0 0 15px 0;
list-style-position: inside;
list-style-type: disc;
background: #eee;
border: 1px solid #999;
}
li{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 5px 0 5px 0;
}
p{
clear: both;
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 15px 0;
}
</style>
</head>
<body>
<h1>Basic example on using floating lists with paragraphs</h1>
<div id="container">
<p>This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph.</p>
<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>
<p>This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph.</p>
<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>
See how simple it is to combine some floating HTML lists with a few paragraphs within the same web document? I bet you do! In this case, I decided to code four different lists, so you can see more clearly how these elements can be used in conjunction with others. This should give you a good idea of how useful the lists can be.
In addition, below I included an illustrative image that shows the output produced by the previous (X)HTML file:
Okay, at this point, I've shown you a practical example that illustrates how to put floating lists and paragraphs in the same web page. Hopefully, with this example at your disposal, you’ll quickly start using these handy lists with your own web sites!
Even though the hands-on example that you just learned does show how to combine floating lists and paragraphs in a single web document, all of these elements present a fairly primitive look.
Therefore, in the course of the next section, I’m going to incorporate a few additional CSS styles into the previous (X)HTML file, with the purpose of polishing its look and feel.
Want to see how this will be done? Click on the link below and keep reading.
Style Sheets 
CSS Combinators: Working with Child Combinators
