Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal centering inside div

    Tricky question for ya: I have a result box after a search displaying the number of pages for easy access. The number of pages will change depending on how many results you get, and there are previous and next buttons on each side - like this:

    Code:
    <previous      |1 2 3 4 5 6|      next>
    With tables, this would be a breeze. With divs, not so easy. Or rather, it IS easy up to a point - centering the 1 2 3 etc divs. Yeah, they do have to be divs. So far I've got three boxes floated next to each other, like this:
    Code:
    <div class="prev">prevbutton</div>
    <div class="mid">
    (1 2 3 4 5 etc)
    </div>
    <div class="next">nextbutton</div>
    and using text-align this looks good. When you turn 1 2 3 into floated divs, however, the text-align:center for the "mid" box dies. And I can't set a fixed margin-left since I don't know how many divs will reside in this box! I tried display:inline on the number divs and that kind of worked, but then I couldn't set width, height, or borders on them which makes it useless for this application.

    (site has to work in IE6, Firefox, Opera, Safari)

  • #2
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts
    Why can't you use <span> tags inside your div?
    <div> - putting your mind in a box since 1997

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Order, floats

    If you don't mind slightly altering the order in which those divs appear in the source, you could float the "prev" and "next" divs left and right repectively, and center the "mid" div using auto margins.
    The order of the divs has to be prev - next - mid though.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New to the CF scene
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, wait, it WAS possible to display:inline them and keep styles on the div. Sorry if I bothered anyone...

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok cool?
    no way.

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    what about less divs?

    Have you tried a single div holding the data for all three (the buttons and the list of numbers). Then float the prev button to the left and the next button, float:right;
    Then assign the ul#numberList id and for all thrree control their positioning within that single div with padding and margins?

    my 2p

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •