dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Centred Div (Horizontally+Vertically)

  1. #1
    Join Date
    Nov 2007
    Posts
    362

    Centred Div (Horizontally+Vertically)

    Hi,

    How do I centre a div, and always keep a 18px gap at the top of the page (before content start) when the browser window is resized?

  2. #2
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187
    Not easily is the answer. Here is a link to a page that enables you to put static headers and footers on the page. You could do that, setting each at 18px high, and leaving the content blank, but beware, it is buggy.

    I often find the better option is to use JavaScript.

    http://www.cssplay.co.uk/layouts/basics2.html

  3. #3
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187
    To centre a div horizontally, just use margin:auto

  4. #4
    Join Date
    Nov 2007
    Location
    Williamsburg, VA
    Posts
    55
    You could put an 18px top-padding attribute to the body style.

    What I most commonly do is create an all content class. This is a division that holds all the content. I'm guessing you are using a fixed width for the div you want centered.
    So what I would do is something like

    <style>
    body{
    margin:0px;
    padding: 18px 0px 0px 0px;
    }
    .allContent{
    width:800px;
    text-align:left;
    margin:auto;
    }
    </style>

    <body>

    <div class="allContent">
    content
    </div>

    </body>
    Last edited by matt.ritter; 02-22-2008 at 09:01 AM.

  5. #5
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187
    Oh yeah. Sorry. I thought you meant a margin at the top AND bottom. d'oh!

  6. #6
    Join Date
    Nov 2007
    Posts
    362
    Quote Originally Posted by matt.ritter
    You could put an 18px top-padding attribute to the body style.

    What I most commonly do is create an all content class. This is a division that holds all the content. I'm guessing you are using a fixed width for the div you want centered.
    So what I would do is something like

    <style>
    body{
    margin:0px;
    padding: 18px 0px 0px 0px;
    }
    .allContent{
    width:800px;
    text-align:left;
    margin:auto;
    }
    </style>

    <body>

    <div class="allContent">
    content
    </div>

    </body>
    Brilliant! How do I now centre the div horizontally and vertically?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles