SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning in container div

    Hey, I'm trying to position three buttons in a container div: a Previous, a Home and a Next button. The Home button should always go in the middle, while the Previous and Next buttons should go at the sides, with equal spacing between them and the Home button.

    Basically, I want it to look like this:
    Code:
    ----------------------------
    |  ----------------------  |
    |  |  Pr     Ho     Ne  |  |
    |  ----------------------  |
    ----------------------------
    I've tried with floats, but that made the Home button dependant of the Previous button, making the spacing between the Previous and Home button and between the Home and Next button not equal. Right now, I've tried this:
    Code:
    .previous {
      width: 90px;
      height: 20px;
      background-color: #408080;
      border: 1px solid #008040;
      text-align: center;
      position:absolute;
      left: 10px;
    }
    
    .home {
      width: 90px;
      height: 20px;
      position: absolute;
      background-color: #408080;
      border: 1px solid #008040;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    
    .next {
      width: 90px;
      height: 20px;
      right: 10px;
      background-color: #408080;
      border: 1px solid #008040;
      text-align: center;
      position: absolute;
    }
    This works like a charm, except for one thing... the position: absolute; is relative to the page. If I could get that relative to the div it's contained in, it'd work like a charm. I do realize this kind of beats the purpose of position: absolute, though Any help'd be greatly appreciated. Thanks in advance

  2. #2
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    {position: relative;} positions something relative to its container. "absolute", as you've correctly pointed out, positions with regard to the edges of the window.

    Try position: relative and see how it goes.
    fisherboy
    Web Site Design

  3. #3
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    I'd put those three links into a paragraph -
    then you can center the text, set the width
    to a % of the parent div & any padding on
    the links [L&R] will affect the spacing.
    [And skip positioning absolutely altogether!]

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Skip absolute positioning certainly but I'd put the 3 links in an unordered list, set the list items to display: inline, float the previous left and the next right. The floats have to come first so home would be your last list item.


Bookmarks

Posting Permissions

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