Standard Website size

Hey guys was wondering .. i want my website to be aligned center so that all computers can view it.

like there is a lot of space wasted on the right as the site is aligned to the left..

how can i make it so that the site is in the center of the browser?

the default page size i am using is 1024x768(?) idk the second part after the 'x'

thanks :D

evilguyme

Junior Poster in Training

71 posts since Sep 2009

Reputation Points: 10

Solved Threads: 0

4 Months Ago

0

wrap a div around the entire page contents and in the CSS give it a width of 100% (so it fills the width of the screen). Then have a second div that specifies an actual width (how wide you want your content to be) and use the margin-left: auto; and margin-right: auto. This will center the inner div within the first. Place your content inside the second div.

<div id="page">
   <div id="container">
        your content goes here
   </div>
</div>

And your CSS:

#page {width: 100%;}
#container {
    width: 1024px; /* or whatever you need */
    margin-left: auto;
    margin-right:auto;
}

That should do the trick.

hericles

Practically a Posting Shark

823 posts since Nov 2007

Reputation Points: 136

Solved Threads: 169

4 Months Ago

0

Warp the page contents in a DIV like below.

Your Page Contents

This should work.

jorik

Light Poster

35 posts since Sep 2009

Reputation Points: 10

Solved Threads: 0

Infraction Points: 5

4 Months Ago

0

use this

#wrapper{
width:1000px;
margin:0 auto;
}

when u use 1024px width its going to horizontal scroll bar for resolution 1024x768 so it is not right so whenever u use width for website use 1000px

Thanks & Cheers

Yog1823

Newbie Poster

3 posts since Feb 2012

Reputation Points: 10

Solved Threads: 0

4 Months Ago

0

better to use 960px width in the above code, to allow for all browser chrome and get it away from the very edges of the browser.

The two div answer above is wrong and unnecessary. The outer div (#page) doesn't do anything at all!

drjohn

Posting Pro in Training

448 posts since Mar 2010

Reputation Points: 76

Solved Threads: 80

3 Months Ago

0

you may want to be carefull by setting a fixed width or height, since you have no idea who will visit the page and what resolution their screen/video card can support.

stultuske

Posting Sensei

3,137 posts since Jan 2007

Reputation Points: 1,114

Solved Threads: 433

3 Months Ago

0

anything in pixels will fail ...
anything in any fixed size will fail ...
... in some/many/all combinations of device and browser.

current best practice for layout is em and % scalar dimensions that auto adjust to window size device resolution user preference,
added bonus that the site is disability friendly, auto adjusting around user preference, without further code.

a page laid oout (example)

body {width:95%; margin:auto;}
p { width:95%; margin:auto;}
p.this { width:85%; margin:auto;}
p.that { width:75%; margin:auto;}

looks the same at all resolutions, a html scrap

<body>
<div>bla bla bla</div><p>bla bla bla</p>
<p class='this'>bla bla bla</p>
<p class='that'>more  bla bla bla</p>

gives a similar indented paragraph structure in any browser,in partscreen or fullscreen

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

Standard Website size

This article has been dead for over three months