06. Container changes

So our previous step added some colour and definition to each section but it’s obviously a long way from completion. An important thing to note at this stage is that getting the foundations right is vital with any computing project (not just web design) so focus on doing each step really well and understanding every minute detail of what you’re doing!

Now what we’re going to do is restrict the width of our web page. This is something you may not want to do with future projects but in order to learn more about CSS and UI (user interface) we’re going to do it here.

You may recall from our “index.html” file that we had a “div” tag with the class “container” that surrounded everything on our page, well, it’s time to define a rule for that one:

.container {
   width            : 950px;
   margin           : 0px auto 0px auto;
   background-color : #f5a9a9;
}

This rule is probably fairly self-explanatory except for perhaps the word “auto” being used in the margin sizes…this leads us to the order in which multiple sides are written.

TRouBLe
When making margins, paddings or anything where you can refer to all four sides, the “TRouBLe” rule may be of assistance:

  1. Top
  2. Right
  3. Bottom
  4. Left

This is the order in which the values you write get applied to your page element. So in our rule above we’ve said the margin for Top and Bottom are to be 0 pixels and the margin for Right and Left are to be “auto“.

auto
The phrase “auto” in this context means that the browser will choose what margin is required. The way we’ve written our example means that our content will center itself horizontally. This is because the browser recognises our container is to be 950 pixels wide (because we told it to be) and that our side margins are to fill the remaining space in a browser window. Since they’re both set to “auto“, the remaining space will be split in half, thus centering “container“.

Now, depending on the resolution of your monitor and the size of your browser window, you should have some gap on either side of your vertical rainbow much like this:

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>