0

I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.

enter image description here

The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.

Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.

Here's a live page example, I've tried everything google spit up, to no avail. If anyone knows of a simple solution, please let me know :)

Thank you :))

pufAmuf
  • 7,415
  • 14
  • 62
  • 95
  • Tried absolute positioning? is that an option? – Undefined Apr 28 '12 at 14:43
  • Yup. Making the wrapper `relative` and the paginator `absolute` breaks my `inline-block` code which centers the navigator. That's why I said that because the content is dynamic and I don't know the width of the paginator beforehand, I have a problem :( – pufAmuf Apr 28 '12 at 14:50
  • @pufAmuf Then put the paginator inside an absolutely positioned block that has left:0 and text-align:center. – Mr Lister Apr 28 '12 at 14:59
  • @pufAmuf There's no reason that `position:relative` should affect your `inline-block` layout. That's a separate issue. – Phrogz Apr 28 '12 at 15:04
  • What are your absolute markup requirements? – Phrogz Apr 28 '12 at 15:10

4 Answers4

3

Clear won't work with your inline-block display, but you need that for centering.

Try this solution for creating a clearing div, then put

<div class="clearfix"></div>

between your products and your pager.

Community
  • 1
  • 1
Gats
  • 3,452
  • 19
  • 20
1

Put padding at the bottom equal to the height of your nav, and position like so:

.wrapper { position:relative; padding-bottom:1.5em }
.nav     { height:1.5em; position:absolute; bottom:0 }

For example: http://jsfiddle.net/CwrMq/

But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/

Phrogz
  • 296,393
  • 112
  • 651
  • 745
1

Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/

skip405
  • 6,119
  • 2
  • 25
  • 28
0

Here is a solution i tend to use in situations like this.

Your paginator needs to go inside a container that positions it horizontally

See this fiddle - http://jsfiddle.net/94MwF/1/

Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.

Undefined
  • 11,234
  • 5
  • 37
  • 62