How best to Constrain Content?

Hi all, I’ve read a few Sitepoint books (and several others by different authors) but I’ve either missed this info or it wasn’t covered.

What I want to do is limit the size of my <body> whilst still having a background to fill any excess space. An example of what I mean: So the header, menu, content, etc is always the same size regardless of the browsers window size but I can add a colour or background image to the full page. What would be the cleanest way to achieve this please?

Cheers in advance for any advice, Malane.

Hi Malane. Welcome to the forums. :slight_smile:

The trick here is to wrap all of the content in a div, which has a set width and is centered. In that site, they’ve done it by putting all of the content in a div with an ID of “container”:

<div id="container">

 [SIZE=1] [I]all page content here[/I][/SIZE]


… and then setting these styles:

#container {
  width: 898px;
  margin: 10px auto;

So the width is not set on the body element at all, which isn’t a good idea anyway.

Have a look at that site in Chrome, right click anywhere on the page and select “Inspect Element”. A window will open that shows you the HTML structure of the page and all the CSS that applies to each element. It’s a great way to see how a page is constructed. :slight_smile:

Thanks for the speedy reply Ralph. How would I create the background for the space outside the 898px and where is the height set? Also what is the ideal size for a constrained webpage?

Cheers, Malane.

You set the background on the body element, something like this:

body {
  background: #E3DDD1 url(/images/background-image.jpg) no-repeat 50% 0;

Also what is the ideal size for a constrained webpage?

There isn’t really an ideal, as there are so many different screen sizes. It’s often better to set a % width, so that the content can expand/contract depending on the screen/browser size. But that introduces a lot of other issues, so perhaps it’s better to start with fixed width when you are starting out. 960px width is often a god width.

Thanks again Ralph. I will give it a go and see if I understand it well enough to get it to work :slight_smile:

Cool. Let us know how you go. :slight_smile:

Hi Ralph, I was able to do what I wanted following the advice you gave me, thanks :slight_smile: I was wondering is there any way to set the height of the container because I would like the “box” to be the same on each page regardless of the differing content.

Cheers, Malane.

I’m not sure which box you mean, but I’d advise against putting fixed heights on anything. As soon as a user resizes the text, for example, you design will fall apart. You could do something like set a min-height on the box instead, so that it will be at least a certain height on each page, but can grow taller if needed.

The “box” I mean is the <div id=“container”>. The min-height sounds like it would do what I want. Would I add it as follows?
#container {
width: 898px;
margin: 10px auto;
min-height: 898px;}

Yep, that’s right. :slight_smile:

Thanks for all your help and advice Ralph, and for your patience with my newbness :slight_smile:

Cheers, Malane.

You’re welcome. I was there not long ago at all … and some would even say I’m still there. :smiley:

Questions are what we are here for, no matter how simple. :slight_smile: