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 7 of 7
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    problems aligning three divs: left center & right with display: inline

    I'm kinda new to the CSS way of life and i'm trying to display three clumps of text across the same horizontal line... akin to a three-columned table.

    what is the best way to achieve this using CSS? i assumed display: inline and three <div>'s would be required... but i could be overcomplicating my life.

    also, for the middle alignment I used this:
    Code:
    margin-left: auto; 
    margin-right: auto;
    is this a safe approach?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hehe, okay that works! i actually semi-understand the logic too!

    any thoughts regarding the validity of the second question? i asked it because I have a page with just one object in the middle, but the DIV has a border and padding and all that.

    do i need to add three div's just to center one?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

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

    Centering

    Although there are those that favour absolute positioning tricks, using auto margins definitely is a completely valid and fitting approach to center an element with a set width. Without a set width, auto margins will be rendered as zero margins. For IE versions below 6 (which don't understand the auto value but do incorrectly apply text-align to block elements), the text-align trick can be added.
    You certainly don't need three divs to center one!
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    alright, so i managed to center it horizontally, now how do i center it vertically?

    Code:
    #pic {
    height: 233px;
    width: 366px;
    border: 1px #ccc solid;
    padding: 20px;
    margin-left: auto; 
    margin-right: auto; }
    the #pic is the div I wish to be completely centered
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This might get you on the path to centering...

    http://www.wpdfd.com/editorial/thebox/deadcentre4.html

    see if that's what you had in mind

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    perfect, thanks
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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