Styling Pagination Links - css

Question

I am having a hard time applying CSS to some pagination links. I would like the links to show horizontally at the bottom of the page, centered:
1 2 3 > >>
Right now with the CSS, they show vertically, centered, and near the top of the page:
1
2
3
>
>>
What sort of CSS can I apply to the "pages" class in order to get these links displayed as I would like?
Thanks in advance,
John
if ($currentpage > 1) {
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=1&find={$_SESSION['find']}' class='links'><<</a></div> ";
$prevpage = $currentpage - 1;
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage&find={$_SESSION['find']}' class='links'><</a></div> ";
} // end if
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
if (($x > 0) && ($x <= $totalpages)) {
if ($x == $currentpage) {
echo " <div class='pages'>[<b>$x</b>] </div>";
} else {
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$x&find={$_SESSION['find']}' class='links'>$x</a></div> ";
} // end else
} // end if
} // end for
if ($currentpage != $totalpages) {
$nextpage = $currentpage + 1;
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage&find={$_SESSION['find']}' class='links'>></a></div> ";
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&find={$_SESSION['find']}' class='links'>>></a></div> ";
} // end if
The CSS:
.pages
{
text-align: center;
margin-top: 10px;
margin-bottom:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif ;
}
a.links:link {
color: #000000; text-decoration: none;
text-align:center;
margin-left:8px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}

Answer 1

Two things:
You need to put an entity reference in for the anchor text. That means > instead of >; and
You can put the links in a row in multiple ways, including making them display: inline or if you want more control over margins use float: left although this will have other affects on your layout.
For example, this is the sort of navigation you should be aiming for:
<div id="nav">
1
2
3
>
>>
</div>
with:
#nav { overflow: hidden; }
#nav a { display: block; float: left; margin: 4px 8px; }
#nav a:hover { background: #CCC; color: white; }
The HTML is minimal and to the point. Prefer making anchors (<a>) display: block instead of putting them in a <div> because this way they will be clickable anywhere within the box, not just on the number/symbol text. Larger target areas are better.