Results 1 to 3 of 3

Thread: Centering after re-size

  1. #1
    Join Date
    May 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Centering after re-size

    Hello everyone, hopfully one of you can help me. Look at the way the yahoo http://www.yahoo.com/ or Google http://www.google.com/ websites center on the page at a browser setting of 1024x768 as opposed to aligning to the right like my website. Then at an 800x600 setting they fill the window perfectly.
    Getty http://creative.gettyimages.com/source/home/home.aspx takes it a step further by centering vertically as well. Do any of you tech-warlords know how this is done?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is no one way to do this sort of thing. I'd suggest looking at the source code of sites that do it, to get an idea of some of the different methods. I currently favor using at least a transitional/loose DTD and a container division of fixed width with left and right margins set to auto.

    A lot depends upon your content. If you do not constrain your content in any way, it generally will fill the space available, but will lay out differently in different sized windows. This can be fine as long as it looks OK at each size. The trap many designers fall into is wanting everything to look the same at all resolutions/window sizes and in all browsers. That is nearly possible but, a real headache and can never be done 100%.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    There are many ways to center the layout of a page. Using CSS, for example, the below container div is centered:

    Code:
    <style type="text/css">
    #containerdiv{
    margin-left: auto;
    margin-right: auto;
    width: 870px;
    }
    </style>
    
    <div id="containerdiv">
    page content there...
    </div>
    Setting a container's left and right margins to both "auto" is the key here.

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
  •