Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

CSS: Center a site made from layers (divs) on the browser

Bottom of Page

1 to 6 of 6

  1.  
    • CommentAuthorsusanne
    • CommentTimeJan 25th 2007
     
    Hallo,
    I made a website using Dreamweaver 8. I used layers to create my website. Now, I would like my website to show in the middle of the browser when enlarged to a bigger size of my site. I don't want the site to shrink when the window is smaller than my website.
    I have no idea how to do that. I could neither find info on that.
    Could you please help?

    Thanks in advance.
    Regards, Susanne
  2.  
    Hi Susanne,

    Is the web site in question online somewhere? It would help if we could take a peak at your code. If it isn't online, perhaps you could post your HTML and CSS here?

    In the meantime, your HTML should look something like this:

    <body>
    <div id="container">
    Fixed-width and centred content here ...
    </div>
    </body>
    And your CSS should include something like this:

    /* Center the body for IE5/Win users */
    body {
    text-align: center;
    }

    /* 0px top and bottom, auto-fit the side-margins.
    Specify a fixed-width in pixels (760px here)
    and then re-align the text. */
    #container {
    margin: 0 auto;
    width: 760px;
    text-align: left;

    /* Border for illustrative purposes only. */
    border: 1px solid #f00;
    }
    For a more detailed explanation, check out CSS Centering 101 on SimpleBits.

    Cheers, Adam.
    •  
      CommentAuthorw3internet
    • CommentTimeJun 5th 2007
     
    I have also used this method lately and although it works fine with Internet Explorer I am at a dead end finding a solution for Firefox and Netscape. Any suggestions?
    •  
      CommentAuthorTyssen
    • CommentTimeJun 5th 2007
     
    If you're talking about horizontally centering, then Adam's solution should work in all browsers. If it doesn't, then there's something else going on that you'd need to show us.
    • CommentAuthordemonzmedia
    • CommentTimeSep 4th 2007 edited
     
    How I interpret your question is "how do I center a website proportional to the size of the browser window?"

    If this is what you are trying to do, what you need to do is create a container div with internal divs that are smaller than (either in px measurements or as a percentage) the width of the container div. For the css you will need to have -

    container {
    margin-left:auto; /* auto float to left */
    margin-right:auto; /* auto floats to right */
    width:x; /* Make this any value you like, suggest 800 - 1024px */
    /* margin auto is calc'd as browser width - x (conatiner width)/2 */
    }

    child-containers {
    float:left; /* Float consecutive containers left of each other */
    width:y; /* Any value smaller than x */
    }

    This will make the conatiner div move to the center of the page inside the browser window and all the child divs will move inside this. When you make you child containers in a row using the "float:left;" attribute try to make their width sum equal to the width of the container div, as the html will start writing on the next div layer down once it has reached this container width. Does this help you with what you were trying to do?

    __________
    Posted by demonz media web design Sydney
    • CommentAuthorbarry
    • CommentTimeOct 1st 2007
     
    To centre your div use

    margin-left:auto;
    margin-right:auto;

    thats it

    I use it all the time at my site Web Designers Dundee

    Barry

1 to 6 of 6

  1.