CSS/HTML Container Tutorial

Before I start the tutorial, I want to introduce those of you who don’t know to the power of containers. Containers will hold the main content of your website, see image below for details:

(Click for bigger image)

HTML/CSS Container

In the above image, all of the boxes can be put there by Containers. Containers can give you any type of freedom you want when building a website. Here’s how it works;

The code:
#container {
width: 910px;
margin: 0px auto;
padding: 40px 30px 0px 30px;
background: #353535;
}

What does this code do though?

Width: The initial width of the container; this will vary based on what type of webpage/container you’re building.

Margin: A margin set to Auto will force the container into the middle of the page.

Padding: The padding works when you resize the page, the container will never touch the sides of the webpage, and will stay 30px away from it (as specified in the padding)

Background: This is basically the background color of the webpage. It can be adjusted to what you think suits your layout.

---

Now, we have the CSS, where does the HTML come into play?

The following is used to make the container show (it will pull it from the CSS and insert it.)

<div id="container">Container Content here</div>

Id=”container” – The ID is a variable and can be changed it is basically what you call it in the CSS.. for example mine said #container.

Container Content Here – All of the content inside of the container, this would most likely be either text or images.

<div> – A div tag is a container in itself, which brings me up to my next point.

---

There is another way to have the same div effect with HTML. Do the following:

<div style="width: 910px; margin: 0px auto; padding: 40px 30px 0px 30px; background: #353535;">Content</div>

In this version, you have the ability to change it on the page, instead of having to edit a CSS file. This works best when you do not have access to a CSS file; and it will show the same as the above.

style – Defines the style of the Div container

Here’s how it looks as actual HTML (with a shorter width)

Content

And there’s a DIV container!

If you have any questions please check out our forum, or post a comment!