Tutorial 5 - Floating next and back buttons using lists

Step 4 - Float the list items

Two rules are now added to make the list items move over to the edges of the page. A "float: left" is used on the "back" button and a "float: right" is used on the "next" button. A width is also required when floating an element - unless it is an image.

For this example, a width of 5em is used. The float: right list item looks like it is not floating to the right edge of the containing box at present. This is because it is aligned left inside a 5em wide box. We will fix this soon.

Go to Step 5 →

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


CSS CODE
ul#navigation
{
list-style-type: none;
margin: 0;
padding: 0;
}

ul#navigation .left
{
float: left;
width: 5em;
}

ul#navigation .right
{
float: right;
width: 5em;
}

HTML CODE
<p>
Lorem ipsum dolor sit amet...
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
Other Max Design articles and presentations
Associated with webstandardsgroup.org