SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS margin:auto and fluid layout

    Here is my first attempt at a fluid layout (temp link)
    http://www.premiumwebsites.net/sampl...ts/index.shtml

    With the fixed layouts I have done I use margin:auto to center items on my page. For some reason I do not understand that is not working with this layout. Could someone explain why it does not work? I must be missing a key point somewhere.

    Thanks
    Dotty

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have your max-width value set to 100%. Try giving it a pixel based value, like 1150px or something (and then change the expression to match the value you gave it).

  3. #3
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made that change, but it does not seem to effect anything. On the links page, patient forms page and the medical supplies page I have an image that I cannot get to center. They are in the div with an id of center and I wrote the CSS as
    #center img{
    margin:auto; text-align:center;}
    Is there a flaw in how I am choosing the images with the CSS?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    images are inlined elements, so you can't use margins on them unless you change their display state to block. You might want to try putting text-align: center; on the element that contains the image, but that'll align everything else in it as well.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removing the class from the image and changing the img css to covert to block display as Dan suggested should work :
    Code:
    #center img{
    display: block;
    margin: 0 auto 10px;
    }

  6. #6
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - That did the trick!


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
  •