Adjusting Padding and Margins on Floating Lists with CSS - Assigning padding, margins and widths
(Page 3 of 4 )
In consonance with the concepts that I explained in the prior section, it’s necessary to make some adjustments with reference to certain visual aspects of the floating list recently created, such as the padding and margins values, and their widths, too.
Therefore, I’m going to reset the lists’ margin and padding values, and then specify a fixed width in pixels for each of them, so they can be displayed in a more consistent way across different browsers.
The (X)HTML file below now incorporates all of the CSS properties mentioned earlier, thus I suggest you examine its definition very closely:
<!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>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#listcontainer{
width: 700px;
}
ul.leftlist{
float: left;
width: 350px;
padding: 0;
margin: 0;
list-style-position: inside;
list-style-type: square;
}
ul.rightlist{
float: right;
width: 350px;
padding: 0;
margin: 0;
list-style-position: inside;
list-style-type: square;
}
</style>
</head>
<body>
<h1>Basic example on building floating lists</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>
At this point, you can see that the previous (X)HTML file now includes all of the CSS styles discussed before. In this case, I reset the respective margin and padding values of the floating lists, and then assigned to each of their respective widths a value of 350px. Of course, this process is completely optional, but it helps to accommodate each list more easily on the web document.
Well, at this stage I have taught you how to improve the look and feel of these floating HTML lists by playing around with margins, padding and widths. Of course, if you’re anything like me, then you want to see how the floated lists now look after improving their visual aspect. Below I included a screen capture that should dissipate any possible doubts that you might have:
That was much better, right? However, I’m still not completely happy with the visual appearance of the floating lists, since there are some additional aspects of them that can be considerably improved, such as specifying an adequate indentation of the corresponding bullets.
Yes, that would be a nice “touch” that would make the floating lists look more attractive. In the last section of this tutorial, therefore, I’m going to show you how to modify the indentation of the lists.
To see how this will be achieved, please visit the next section and keep reading.
Next: Controlling the indentation of bullets >>
More Style Sheets Articles
More By Alejandro Gervasio
