4 – Containers

• Understand that CSS organises web contents in “boxes” – the box model
• Be able to apply CSS box model to multiple elements of a web page and group boxes in a specific way to represent data in a specific way.

• Box model
• Margin
• Border

• Padding
• Content

Let’s check our design sketch to see what we should do next.

Since we have two boxes split the space below the topbox, it makes sense to make a big box to hold both those two boxes. Also, it will make it easier for us to adjust the relative positions of those two boxes if we put them inside one big container.

In fact, we will call this big box container.

This container will be big enough to hold the two boxes, but it will have the same width as the topbox based on our design.

Step 1

You should now know how and where to add the lines of code to create a box. Look over the previous lesson if you need help.

1. Add the code below to your index.html page in the correct place.

<div id="container"> 
</div>

You should now also know how and where to add style attributes to a box.

2. Add the code below to your index.html page in the correct place.

#container { 
width: 800px; 
height: 800px; 
}

3. Save your index.html file and open it with a browser or refresh your browser if you have it open already to see the effects.

Let’s examine what we have in our index.html file. Try to indent your lines of code to help you identify pairs of starting and closing tags and the structure of your box layout.

Step 2

Let’s check our design sketch again to see where the left box should go.

We have created a container to hold the two side-by-side boxes. The container has a height of 800px and width of 800px. The two boxes inside it have the same height as the container but with different width. We will give the left box a width of 160px and the right box a wdith of 640px to start with.

160px + 640px = 800px which means those two boxes take up all the width of the container.

Since the two boxes are nested inside the container, we need to put the left box definition nested inside the container box.

1. Add just the code below in BOLD to your index.html page in the correct place.

<div id="container"> 
    <div id="leftbox"> 
    </div> 
</div>

Now let’s add style attributes to the left box. You know how to define a box’s height, width and background colour. To put the box in the left side of the container, we need a new attribute float with value left.

2. Add the code below to your index.html page in the correct place. You can use a background colour of your choice.

#leftbox { 
width: 160px; 
height: 800px; 
background-color: blue;
float: left; 
}

3. Save your index.html file and open it with a browser or refresh your browser if you have it open already to see the effects.

Step 3

Task: Create the right box.

• We should now have a topbox, a container box, and a left box that is floating in the container’s left side.
• You will need to create the right box with a height of 800px, width of 640px, background colour of your choice.
• The right box must stay to the right side of the container box.
• If you are stuck, scroll back up to see how the left box is defined and styled.

1. Following the design layout, using the code from Step 2 for guidance, add the right box inside the container.

Step 4

We now have three boxes (Topbox, leftbox, rightbox). All of them are empty except the top box which has our page heading. Let’s examine the body section of our index.html.

As we learned before, the order of elements in a html file is very much the same order elements will show up in a browser. The paragraph ‘My dog Jack is a miniature schnauzer. He is 8 months old.’ will show up as the first line in this case

If we want the paragraph appear in the right box, we need to move the line inside the definition of the rightbox.

It’s the same for the hyperlink to the mySecondWebPage.html web page. We need to move it to the inside of the left box.

1. Update the body section of index.html to look like the code below.

2. Save your index.html file and open it with a browser, or refresh your browser if you have it open already to see the effects.

After you have done everything so far, you should see something similar to the following image when you open your index.html in a browser:

If at any point you are stuck, watch the video below again for guidance.

Float: Used for positioning and formatting content e.g. let the box float on the left of the screen.

In this lesson, you…

• Further developed understanding that CSS organises web contents in “boxes” – the box model
• Are able to apply CSS box model to multiple elements of a web page and group boxes in a specific way to represent data in a specific way.

In the next lesson, you will…

• Understand images are another form of data in addition to text
• Develop understanding of using images effectively in web design
• Further develop skills in applying CSS and HTML to create a purposeful website

• Complete the tasks for this lesson. Save your work.
• In lesson two you used the trust system to rate your own progress. Lets see how you are getting on.
• If you find there are things you still cannot do, this will be the good chance to catch up by asking your teacher or re-read the instructions.

• You have created the container box.

• You have created the leftbox and the rightbox, they are correctly aligned, and have background colours.

• You have moved the the hyperlink element for the mySecondWebPage.html web page into the leftbox.

When you are ready, click here to assess your progress.