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
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.
Warp the page contents in a DIV like below.
<div style="margin:0 auto; width:1024px;">Your Page Contents</div>
This should work.
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
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!
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.
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.