Help need with making content box width fixed

**rede** · 09-13-2007, 07:22 PM

Hi there

I am having problems with my template for my new webpage.

I need to make my main content box so that it displays differently on different screen resolutions. I want my main content box to be 780pixels wide, and am presuming I need to make it "fixed" to achieve the following display on these screen resolutions:

800x600 - the content box to fill whole width of page (so no background seen)
1024 x 768 - a slim column of background to be seen on each side of content box.
1280x1024 - a fatter columnn of background to be seen on each side of content box.

Can anyone tell me how I can achieve this? I would be really grateful to anyone who can point me in the right direction.

Many thanks in advance!
Rachael

**brentnicholas** · 09-19-2007, 08:11 PM

I'm not an expert in CSS by any means but you might what to check out "CSS Play". Google it. He's got some incredible stuff up there and quite a few layouts pre-made. Start with a simple one that is close to what you want and then monkey with the settings in the css file. You'll start to get a hang of what you want.
That's what I did about 7 months ago and am feel much more comforatble getting things done with css.

hope that's of some help..

BN

**boogyman** · 09-19-2007, 08:15 PM

check out
http://alistapart.com/articles/fauxcolumns
if you would like an image to be in the background...
otherwise just use a container and set the width of that.

also you do not need to use a fixed width.
file.css

Code:

body {
     margin: 0 auto; /* centers the content */
     width: 90%; /* creates the padding / whitespace effect */
     background: #fff;
}
div#container {
     min-width: 760px; /* 800x600 friendly */
     background: #eee; /* defaults content to have gray background */
}

file.html

HTML Code:

doctype...
<body>
      <div id="container">
              <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
              <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
              <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
              <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
     </div>
</body>
</html>

ps. dont forget to use the HTML4.01 DOCTYPE as XHTML is still not supported by Internet Explorer and Transitional DOCTYPE has long since been outdated

Thread: Help need with making content box width fixed

Thread Tools

Search Thread

Help need with making content box width fixed

Bookmarks

Bookmarks

Posting Permissions