Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member bluntknife's Avatar
    Join Date
    Jan 2003
    Location
    Bucks UK
    Posts
    288
    Member #
    451
    This should just be a quick question hopefully...

    Is there a way I can center a div on a page? I'm working on a layout [here when my computer's on...] that was tables, then I read the excellent tutorial by glyakk and decided to go for a tableless layout. Now I'm stuck getting the main content centralised, like it is here.

    Can anyone help me with this one? :ichatermm

    Ollie
    Hardly the sharpest thing in the drawer.
    Design | Life | Outdoors | Ryukin Radio

  2.  

  3. #2
    Senior Member bluntknife's Avatar
    Join Date
    Jan 2003
    Location
    Bucks UK
    Posts
    288
    Member #
    451
    PS This is how it was with tables - this is pretty much what I want to achieve:

    http://localhost/events/writeup.php?eid=3
    Hardly the sharpest thing in the drawer.
    Design | Life | Outdoors | Ryukin Radio

  4. #3
    Junior Member
    Join Date
    Jul 2004
    Posts
    11
    Member #
    6679
    Hi,

    try this;

    #div {margin:0 auto;}
    <div>blah blah</div>

    hope it helps!

  5. #4
    Senior Member bluntknife's Avatar
    Join Date
    Jan 2003
    Location
    Bucks UK
    Posts
    288
    Member #
    451
    Genius!

    Thanks very much

    Ollie
    Hardly the sharpest thing in the drawer.
    Design | Life | Outdoors | Ryukin Radio

  6. #5
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    Another way to go about it:
    Code:
    body {
      text-align: center;
    }
    #layout {
      margin: 0px auto 0px auto;
      text-align: left;
    }
    Not really sure which one you would rather use though. I know this is what I use for tables.


  7. #6
    Junior Member
    Join Date
    Jul 2004
    Posts
    11
    Member #
    6679
    Hi,

    you may want to take note that the solution i provided isn't supported by older browsers so do try both methods and check if possible on an older browser! :classic:

  8. #7
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    I think mine works fine.

    NOTE: Older browsers don't support CSS!


  9. #8
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Jlgosse's example works for older browsers that support css. One more thing you might want to consider is a border around your table the same color as your background so the left side does not dissapear when you narrow your browser.


  10. #9
    Junior Member CrazyP's Avatar
    Join Date
    Jul 2004
    Posts
    13
    Member #
    6653
    way I did it
    Code:
    position: absolute;
    	left: 50%;
    	width: 774px;
    	margin-left: -387px;
    I do it that way , where 774 is the width of the div,My container div, and -387 is negative half the width of the div. don't ask me why it works, but it works in IE 4.0-6.0 and firefox so Im happy

  11. #10
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    That's another way to do it and it's a pretty common trick.

    I don't enjoy it, though.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:46 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com