New to CSS...Defining set page width.

RodS2 · Sep 27, 2009

I'm new to CSS and using an online tutorial to learn how to turn my photoshop design into working html. One thing it hasn't shown me how to do is define a specific page width.

My photoshop page width is 900px and I have it so everything is centered in the middle of the page. Where do I define (in my CSS file below) that my page is 900px and all contents of the body should be within this 900px area? I added it to the body tag but that did not work out too well. Thank you for your help.

@charset "utf-8";
/* CSS Document */

*{
margin: 0;
padding: 0;
}

body{
font-family: Arial, Helvetica, sans-serif;
background:url(images/top-bg.png) repeat-x;
width:900px;
}
#logo {
position: relative;
padding: 30px 0px 0px 40px;
margin: 0 auto;
}

vacunita · Sep 27, 2009

You can't limit the size of the body element, well you can, but it doesn't work the way you expect it to.

Basically the recommended technique if you want to limit the size of what is displayed is to create an additional content div and limit that.

You'll also want to start by making both the html, and body elements 100% of the viewport of the browser.

Your basic CSS should look like this:

CSS:

*{
    margin: 0;
    padding: 0;
}

html,body{
width:100%;
}

#content{
width:900px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

and your html:

HTML:

<body>
<div id="content">
Put the rest of page in here.

</div>
</body>

This will give you a box 900px wide where you can stick the rest of your code. Which is centered in the middle of the browser.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

New to CSS...Defining set page width.

RodS2

IS-IT--Management

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor