Centering a web page

PerfectSpeed

PerfectSpeed

Suspended / Banned
Messages
2,173
Name
Steve
Edit My Images
Yes
How do you code (center) a web page in D/W instead of it being left aliened :shrug:

Thanks
 
Wrap the entire site in a wrapper div and add a line of CSS.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<body>
<div id="wrapper">
<!-- Rest of the site goes here -->
</div>
</body>
</html>

And in your CSS file:

#wrapper
{margin:auto;
width:900px;}

You may need to use margin:auto 0; for IE though, cos its a royal pain in the backside. And the width can vary depending on how wide your site is.

Hope that helps :)
 
Thank you :thumbs:

Stick around, I may be back with with a few more questions :lol:
 
surrealillusions said:
Wrap the entire site in a wrapper div and add a line of CSS.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<body>
<div id="wrapper">
<!-- Rest of the site goes here -->
</div>
</body>
</html>

And in your CSS file:

#wrapper
{margin:auto;
width:900px;}

You may need to use margin:auto 0; for IE though, cos its a royal pain in the backside. And the width can vary depending on how wide your site is.

Hope that helps :)
Click to expand...

I don't think the extra <div> is really needed (though I don't know for sure as it's been an age since I did any HTML/CSS), you can just add

body
{margin:auto 0;
width:900px;}

into the CSS.
 
surrealillusions said:
You may need to use margin:auto 0; for IE though, cos its a royal pain in the backside. And the width can vary depending on how wide your site is.

Hope that helps :)
Click to expand...

Does anyone still use IE. Firefox and Chrome all the way for me.
 
Cheers guy's :thumbs:

Haven't tried it yet but will give it a look now, any pointers to adding it would be great :)
 
To be more specific, only set the left and right margin to Auto as I'm assuming it's only the horizontal aspect which you want centred? Setting just the "Margin" to Auto will centre all four sides - unless that's what you want.
 
sketch145 said:
body
{margin:auto 0;
width:900px;}
Click to expand...

add

Code: 
html { 
	overflow-y: scroll; 
	}

which will put a permanent scroll bar on the right.

This prevents the page 'jumping' to the right if/when the content is short enough for the browser window to display it all in one go and the scroll bar disappears.
 
gman said:
To be more specific, only set the left and right margin to Auto as I'm assuming it's only the horizontal aspect which you want centred? Setting just the "Margin" to Auto will centre all four sides - unless that's what you want.
Click to expand...

Musicman said:
add

Code: 
html { 
	overflow-y: scroll; 
	}

which will put a permanent scroll bar on the right.

This prevents the page 'jumping' to the right if/when the content is short enough for the browser window to display it all in one go and the scroll bar disappears.
Click to expand...

surrealillusions said:
Thats probably correct as well. They're both block elements so no reason why it shouldn't work.
Click to expand...

Thanks all.

I have had a look around to implement this but have found myself at a loss, coding is really not my thing, I only use design module WYSIWYG :gag:

If any of you could spare the time to help me out it would be very appreciated.

Thanks
 
PerfectSpeed said:
Thanks all.

I have had a look around to implement this but have found myself at a loss, coding is really not my thing, I only use design module WYSIWYG :gag:

If any of you could spare the time to help me out it would be very appreciated.

Thanks
Click to expand...

Sure, just dropped you a pm with my email if you need to send any files.
 
You must log in or register to reply here.
Back
Top