Member Avatar for evilguyme

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

  • 7 Contributors
  • 6 Replies
  • 139 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by almostbob

Recommended Answers

All 6 Replies

Member Avatar for hericles

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.

Member Avatar for jorik

Warp the page contents in a DIV like below.

<div style="margin:0 auto; width:1024px;">Your Page Contents</div>

This should work.

Member Avatar for Yog1823

use this

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

<div id="wrapper">

</div>

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

Edited by Dani because: Formatting fixed
Member Avatar for drjohn

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!

Member Avatar for stultuske

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.

Member Avatar for almostbob

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

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.