Using a container or wrapper element on HTML web pages

From Knowledge Kitchen
Jump to navigation Jump to search


In general you want to wrap ALL of the content in the body of your HTML document inside an outermost containing "block" element. Some people call this outermost element a 'wrapper', and others call it a 'container'. No matter, the idea is the same. The container element should contain everything else in the body of the page.


Example of a container element

For example, the body section of an HTML document using a container element:

 <body>
 	<div id="container">
 		<!-- all HTML code for the body of the page goes in here -->
 	</div>
 </body>


Advantages of using a container element

Following this convention gives you more control over how the page is displayed. For example, some advantages of using container divs:

  • limit the width of the page so it takes up less than the full width of the browser
  • center the entire contents of the page within the browser window
  • easily add margins above and/or below the content of the page
  • apply a background image to just the content area of the page

To sum these advantages up, using a container element allows you to control the contents of a page as a whole, rather than element by element.

Now we will look at some of the CSS code that would allow us to perform each of the above tasks


Limit the width of the page as a whole

Setting the width of the page is as simple as setting the width of the container div. Since all content is inside of the container, all content is restricted to this width:

div#container {
	width: 970px;
}


Center the entire contents of the page

To center the page, you must first give the container a fixed width, as exhibited above. Otherwise, the container, being a block element, would take up as much width as it can, which in this case would mean the full width of the page. By reducing the width to a fixed amount, the width of the page is no longer as big as the width of the browser window, so you have room in which to center the content.

Using a container element, centering the page is as simple as adding equal margins to the left and right side of the container. But how do you know how big to make that margin? Fortunately, there is a CSS margin setting called 'auto' that automatically gives the margins the maximum size available:

div#container {
	width: 970px;
	margin-left: auto;
	margin-right: auto;
}


Easily add margins above and/or below the content of the page

Often, you will also want to remove any top and bottom margins from the container div that the browser may have added by default. If you recall from the W3Schools margin reference page, the margin property in CSS can take either one, two, or four arguments. The following code uses the margin property with two arguments to set the top and bottom margins to '0px' and the left and right margins to 'auto' in one fell swoop:

div#container {
	width: 970px;
	margin: 0px auto;
}

If you wanted to, you could set the margins for each side of the container individually using the margin setting with four arguments. The four arguments are in clockwise order: top margin, right margin, bottom margin, and left margin:

div#container {
	width: 970px;
	margin: 0px auto 0px auto;
}

This is equivalent, but much shorter than this code, which does exactly the same thing:

div#container {
	width: 970px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}


Apply a background image to just the content of the page

Applying a background image to the container is as simple as using the CSS background-image property. This will apply only to the background of the container, so if your container is not as wide as the width of the entire browser window, you will see that the background does not take up the full width of the page.

div#container {
	width: 970px;
	background-image: url(../images/background.jpg);
}

Note: the URL used to indicate the image file to use for the background-image must be relative to where the CSS lives. So, if you have your project set up in a folder called 'project_name', using a standard project folder structure, you will typically have a folder structure that resembles this:

project_name/
project_name/images/
project_name/css/

If the CSS file is inside of the 'css' subfolder, and the image is inside of the 'images' subfolder, then you will need to use a URL that indicates that the browser should look for the image file one level up from where the CSS file lives, and then inside of the 'images' folder. So if your image file is named 'background.jpg', the URL to use in the CSS file would be:

../images/background.jpg


What links here