How best to Constrain Content?

Get Started
1

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: http://www.rawessentials.co.nz/ 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.

2

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]

</div>

… 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:

3

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.

4

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.

5

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

6

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

7

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.

8

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.

9

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;}

10

Yep, that’s right. :slight_smile:

11

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

Cheers, Malane.

12

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: