SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast siboney's Avatar
    Join Date
    Sep 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fitting width to contents and centering

    I've been breaking my head trying to achieve the following.

    I have a div that must "shrink-to-fit" it's contents (a variable size image and some other absolutely positioned divs).

    And that div has to also center on the page.


    The CSS for the div looks like

    #name {
    position: relative;
    overflow: hidden;
    }

    I've done float: left to it which shrinks the width to fit the contents but then how do I center it?

    I've also tried doing display: inline-table but for some reason it's taking up 100% width.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    margin: 0 auto;

  3. #3
    SitePoint Enthusiast siboney's Avatar
    Join Date
    Sep 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    It doesn't work since the div is floated on the left in order to trigger shrink-to-fit

  4. #4
    SitePoint Enthusiast siboney's Avatar
    Join Date
    Sep 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still having problems with this.

    Does anyone know how to make a div fit to contents width wise and center on page?

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Canada
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how bout this:

    body {
    margin: 0;
    text-align: center;
    }
    #wrap {
    background: #000;
    display: inline;
    }

  6. #6
    SitePoint Enthusiast siboney's Avatar
    Join Date
    Sep 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I'll try this


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
  •