How best to Constrain Content?

**Malane** · Oct 4, 2012 07:24

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.

**ralph.m** · Oct 4, 2012 07:39

Hi Malane. Welcome to the forums.

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

Code:

<div id="container">

  all page content here

</div>

... and then setting these styles:

Code:

#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.

**Malane** · Oct 4, 2012 15:52

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.

**ralph.m** · Oct 4, 2012 16:20

Originally Posted by Malane

How would I create the background for the space outside the 898px and where is the height set?

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

Code:

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.

**Malane** · Oct 5, 2012 14:14

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

**ralph.m** · Oct 5, 2012 16:19

Cool. Let us know how you go.

**Malane** · Oct 31, 2012 11:43

Hi Ralph, I was able to do what I wanted following the advice you gave me, thanks

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.

**ralph.m** · Oct 31, 2012 17:19

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.

**Malane** · Nov 1, 2012 14:48

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

**ralph.m** · Nov 1, 2012 16:39

Originally Posted by Malane

Would I add it as follows?

Yep, that's right.

**Malane** · Nov 1, 2012 18:24

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

Cheers, Malane.

**ralph.m** · Nov 2, 2012 00:19

Originally Posted by Malane

Thanks ... for your patience with my newbness

You're welcome. I was there not long ago at all ... and some would even say I'm still there.

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

User Tag List

Thread: How best to Constrain Content?

Thread Tools

Display

How best to Constrain Content?

Bookmarks

Bookmarks

Posting Permissions