Welcome to WebmasterWorld Guest from 54.198.132.40

Forum Moderators: phranque

Message Too Old, No Replies

Center and Left Justify Web Pages Depending Upon the Window Width

Centering depending upon the window width.

     
3:39 pm on Jan 15, 2009 (gmt 0)

New User

5+ Year Member

joined:Jan 15, 2009
posts: 2
votes: 0


How do you center a web page when the browser window is wider than the web page and left justify the web page when the browser window is narrower than the web page? I want to apply this to all web pages. yahoo.com is one such example. I'm using Dreamweaver CS4.
3:02 pm on Jan 19, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 0


You need to have a container element. We will say a div that contains all the elements you want centered. You may already have this element. Add this style to it:

margin: 0 auto;

You also need to add

body
{
text-align: center;
}

That is for older browsers like IE 6 I believe.

9:11 pm on Jan 19, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 28, 2004
posts: 1786
votes: 0


Hopefully you are also relying on an external sheet to help you maintain the consistency of the layout as well.

Here is another example

body
{
margin:0px auto;
padding: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1.0em;
text-align: left;
background: #fff;
color: #000;
}
div.wrapper
{
width: 921px;
margin: 0px auto;
text-align: center;
}
div.maincontainer
{
width:960px;
text-align: left;
}

And then in your HTML code, something like
<div id="wrapper">
<div id="maincontainer">Lorem Ipsum
</div>
</div>
11:48 pm on Jan 19, 2009 (gmt 0)

New User

5+ Year Member

joined:Jan 15, 2009
posts: 2
votes: 0


Thanks for the feedback, worked like a charm.