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 - Polishing the appearance of the sample (X)HTML file (Page 3 of 4 )
As I explained in the previous section, it would be nice to make the floating lists that you saw before a bit more attractive. Thus, with this idea in mind, I'm going to add a gray background color and a thin dark border to them.
The result of this styling process can be seen clearly in the CSS code below:
ul.leftlist{
float: left;
width: 350px;
position: relative;
padding: 10px 20px;
margin: 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;
list-style-position: inside;
list-style-type: disc;
background: #eee;
border: 1px solid #999;
}
As you can see, now the respective floating HTML lists will look much more attractive, since they’ll be displayed centered on a gray rectangle, which also will be surrounded by a thin black border. Of course, in this case the CSS styles applied to the lists in question are only a result of my personal preferences and naturally can be modified.
All right, now that you have seen how the lists were spiced up with a couple of additional CSS styles, it’s time to see how they look when included into a web document, along with some other paragraphs.
This process will be the last example that I’ll show you in this tutorial, so jump ahead and read the final section. We’re almost finished!
Style Sheets 
CSS Combinators: Working with Child Combinators
