How should I place the container?

Question

For example, I'm making a website with width of 960px. How should I use the container of this width? Are there any rules about it?

.container { 
width: 960px;
margin: 0 auto;
}

What is more correct?

1) <div class='container'>[whole website]</div>
2) <div id='menu/header/etc'><div class='container'>[content for this block]</div></div>
3) <div id='menu/header/etc' class='container'>[content for this block]</div>

This type of question lends itself to some personal preference. Most of the time, wrapping the whole site in a container is not the best idea because you have minimal control on content outside of the wrapper container. Neither option is 'more correct', because each has it own use. Use the structure you need, to fit the design you need. Only thing you have to worry about is the correct syntax! — mattdevio, Jan 31 '16 at 08:27

score 0 · Answer 1 · answered Jan 31 '16 at 08:49

0

There are two ways to do that:

<div id="container">whole website</div>
<header><div class="container"></div></header>

The advantage of the second method is you can set background: red for the header and center its content within the container

answered Jan 31 '16 at 08:49

Muhammad Hamada

725
5
13

score 0 · Answer 2 · answered Jan 31 '16 at 08:52

I agree with @magreenberg, and I'd also say look around at boilerplates like Foundation, Bootstrap, or Skeleton Framework and look at their code to see how they format their pages.

Normally you get a Container (full width), Wrapper (content width like 960px), and rows, and within those rows you get various numbers of columns from 1-12.

Make sure to validate your HTML as you go to make sure what you write is semantically correct, and also check your pages in different browsers to check your CSS.

How should I place the container?

2 Answers2