Positioning issue with Div Elements and Centering them

Question

So I'm using Dreamweaver for my website, I've got a div called "Page" which I am using for a minimum width of 1000px and centered in the screen. At the moment, all the content inside of the page div is centered on my screen, however on another screen it's further off to the left. How do i get each individual element's left attribute (or equivalent) inside the Page div to see the edge as the edge of page div instead of the edge of the browser window?

Snippet of my code: #Title and #Home are menu items inside the page div.

    body {
     background: url(../images/background-texture%20d.jpg);
 }

 #page {
    z-index: 1;
    width: 1000px;
    min-height: 1257px;
    margin-left: auto;
    margin-right: auto;
 }

  #title {
     z-index: 4;
     position: absolute;
     top:  -10px;
     left:  0px;
     margin: 0;
 }

 #Home {
     z-index: 4;
     position: absolute;
     top: 0px;
     left: 694px;
     width: 89px;
     height: 65px;
     margin: 0;
     background: url(../images/button%20texture%20b.jpg);
     border-style: solid;
     border-width: 1px;
     border-color: #7F7F7F;
     border-top: none;
     border-bottom: none;
     text-align: center;
 }

HTML code

<!doctype html>
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="page">
<div id="TopLinks">
</div>
<div id="HeaderContainer">
<img src="images/title g-u5076.png" id="title">   
<div id="Home">
<a href="/">HOME</a>
</div>
<div id="Guides"> 
<a href="/">GUIDES</a>
</div>  
<div id="Forum">
<a href="/">FORUM</a>
</div>
<div id="Blog">
<a href="/">BLOG</a>
</div>
<div id="Guilds">
<a href="/">GUILDS</a>
</div>
<div id="Play">
<a href="/">PLAY NOW</a>
</div> 
</div>
<div id="Top-Gradient">
</div>
<div id="PictureContainer-top">
</div>
</div>
</body>
</html>

Can you please explain "however on another screen it's further off to the left." — leigero, Feb 26 '15 at 18:43
Also, you should include your HTML that accompanies this CSS it would help tremendously. — leigero, Feb 26 '15 at 18:44
@leigero Have added the html. And on a smaller screen, the elements are further off to the left and not centered inside the center div like i'd like. — Shedlor, Feb 26 '15 at 18:50
It is kind of difficult to understand exactly what you're trying to achieve, so I don't know how to answer this. — leigero, Feb 26 '15 at 20:07

score 3 · Accepted Answer · edited May 23 '17 at 12:19

I think you miss out on the idea of how menus are made. So to show you best practice of how menus and how to center things I made you a JSFiddle

The HTML:

<nav>
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">GUIDES</a></li>
        <li><a href="">FORUM</a></li>
        <li><a href="">BLOG</a></li>
    </ul>
</nav>

The CSS:

ul{
    /*Reset margin and padding of ul*/
    margin:0;
    padding:0;

    /*Give fixed width needed for centering*/
    width:200px;

    /*Center the list*/
    margin:0 auto;

    /*Background to show what's centered*/
    background:#999;

    /*Center text if you really want things centered as much as possible*/
    text-align:center;
}
li{
    display:block;
}

So what really happens is that you have a <nav> with and <ul> in it. ul stands for Unordered List and those are commonly used to make menus. The ul's got some List Items <li> with an anchor tag in it to make the link work. When you want something centered in the page, you have to give the element a fixed with. Otherwise it won't work.

What really does the trick here is the margin: 0 auto; where 0 stands for the height and auto stands for the width. The width is automatically calculated and is centered that way.

What I also noticed in your code is that all your divs have a position absolute if that was on purpose and really needed, take a look at this post where they explain how to center absolute positioned divs.

Hope this helps and you'll find a way to implement your menu like you had in mind.

Heya, thanks for this. I eventually got it to work with Position:relative and margin: 0 auto; Thanks! — Shedlor, Feb 26 '15 at 21:05

Positioning issue with Div Elements and Centering them

1 Answers1