Center entire page with CSS

Hitler · May 1, 2013

Hello, I'm having troubles with centering the entire page, currently it looks like this..

I'm using a wrapper which I have everything inside of which is this (btw, I still want the two boxes in-line with each-other, just want it centered horizontally).

Code:

#wrapper {
    margin: 0 auto;
    width: 1008px;
    text-align:left;
    }

I suck at CSS, so I'm doing this to get more comfortable with it.
Thanks,
Hitler.

Queef · May 1, 2013

are you using <center> tags?

Hitler · May 1, 2013

I tried them but it didn't help at all, it just makes everything go to the right.

Queef · May 1, 2013

Try the following code:

Code:

#wrapper {
margin: 0 auto;
width: 1008px;
text-align:left;
position:absolute;
top:50%
margin-top:(HALF OF THE HEIGHT AS A NEGATIVE NUMBER);
left:50%
margin-left:-504px;
}

Hitler · May 1, 2013

Queef said:

Try the following code:

Code:

#wrapper {
margin: 0 auto;
width: 1008px;
text-align:left;
position:absolute;
top:50%
margin-top:(HALF OF THE HEIGHT AS A NEGATIVE NUMBER);
left:50%
margin-left:-504px;
}

Didn't work

Queef · May 1, 2013

Hitler said:
Didn't work

Don't want to come across as rude but did you edit this:
margin-top: HALF OF THE HEIGHT AS A NEGATIVE NUMBER);

Hitler · May 1, 2013

Queef said:
Don't want to come across as rude but did you edit this:
margin-top: HALF OF THE HEIGHT AS A NEGATIVE NUMBER);

Yes, I did.

Queef · May 1, 2013

Hitler said:
Yes, I did.

Show me a pic of what it does with my code added.
And the code.

Hitler · May 1, 2013

It does the exact same as the image I posted originally, and which code? the entire css file or just the #wrapper?

Queef · May 1, 2013

Hitler said:
It does the exact same as the image I posted originally, and which code? the entire css file or just the #wrapper?

Just post the entire doc.

Hitler · May 2, 2013

Not sure if you went the whole document as in css file or index so here's both.
The index.php file,

HTML:

<!DOCTYPE html>
<html>
<head>
<title> Ermahgerd </title>
<link rel="stylesheet" type="text/css" href="/styles/global.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="navbar">
<form>
<input type="text" placeholder="Hurdedur" />
</form>
</div>
</div>
</div>
</body>
</html>

CSS file (I was testing different things to see what would work so it looks really weird with the placement of codes, in my opinion anyway).

HTML:

body {
    background-color: #F2F2F2;
    font-size: 13px;
    font-family: 'Helvetica';
    color: white;
    text-align: center;
    margin: 0 auto;
    width: 1008px;
    text-align:left;
    position:absolute;
    top:50%
    margin-top:-334px;
    left:50%
    margin-left:-504px;
    }
 
#header {
    margin-top:97px;
   
    }
   
#navbar {
    border-radius:3px;
    background-color: #373737;
    width:547px;
    height:35px;
    }
   
#navbar form input[type="text"]{
    margin-left:564px;
    width:417px;
    height:35px;
    border-radius:3px;
    border:1px solid #FFF;
    }
   
   
#updatemotto  form input[type="text"]{
    margin-left:17px;
    width:303px;
    height:35px;
    border-radius:3px;
    border:1px solid #000;
    }
   
#updatemotto form label input[type="submit"] {
    margin-left

Center entire page with CSS

Hitler

Member

Queef

Some people...

Hitler

Member

Queef

Some people...

Hitler

Member

Queef

Some people...

Hitler

Member

Queef

Some people...

Hitler

Member

Queef

Some people...

Hitler

Member

Users who are viewing this thread

Latest posts

Connect with us

Newest members