Question

I am having a bit of trouble with trying to wrap an HTML Div around a section of php that creates pagination links.

I am wrapping the div around the code, yet for some reason the div is appearing before (outside) the pagination links. As you can see all the CSS is doing at the moment is putting a border around the div.

I can’t figure out what I am missing. Any pointers would be much appreciated. Thank you in advance.

PHP/HTML

echo '<div class = "pagination">';

/******  build the pagination links ******/
// range of num links to show
$range = 3;

// if not on page 1, don't show back links

  if ($currentpage > 1) {
   // show << link to go back to page 1
   echo " <a  href='{$_SERVER['PHP_SELF']}?currentpage=1'><div class = 'pagination_button'> << </div></a> ";
   // get previous page num
   $prevpage = $currentpage - 1;
   // show < link to go back to 1 page
   echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage'><div class = 'pagination_button'> < </div></a> ";
   }

// loop to show links to range of pages around current page
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
   // if it's a valid page number...
   if (($x > 0) && ($x <= $totalpages)) {
      // if we're on current page...
      if ($x == $currentpage) {
         // 'highlight' it but don't make a link
         echo " <div class = 'pagination_button_current'><b>$x</b></div> ";
      // if not current page...
      } else {
         // make it a link
         echo " <a  href='{$_SERVER['PHP_SELF']}?currentpage=$x'><div div class = 'pagination_button'>$x</div></a> ";
      } // end else
   } // end if 
} // end for

   if ($currentpage != $totalpages) {
   // get next page
   $nextpage = $currentpage + 1;
    // echo forward link for next page 
   echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage'><div div class = 'pagination_button'> > </div></a> ";
   // echo forward link for lastpage
   echo " <a  href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages'><div div class = 'pagination_button'> >> </div></a> ";
   }
/****** end build pagination links ******/


?>

</div> <!-- End pagination div -->   

CSS

.pagination {
    border:1px solid;
 }  

Answer 1

You have some errors in the syntax for HTML

Don’t write << or <, better <<

Even don’t use >> or >, better >>

Also there are some strange notations like <div div class = 'pagination_button'>, it should be <div class = 'pagination_button'>

At least, just for validity: Don’t use <div> inside of <a>