Web Design


Developing Programming and Development (learning strand) skills, specifically:

  • 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.

Contain your Excitement

Learn It

  • Let's check our design sketch to see what we should do next. Click the green button again to hide the sketch and read on.
  • 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.


Code It

  • You should now know how and where to add the lines of code to create a box. Add this to your index.html page in the right place.
<div id="container"> 
  • You should now also know how and where to add style attributes to a box.
  • If you can't remember, look over the last lesson's notes.
#container { 
width: 800px; 
height: 800px; 
  • 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.


  • 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.

Code It

  • 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.
<div id="container"> 
    <div id="leftbox"> 
  • 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.
#leftbox { 
width: 160px; 
height: 800px; 
float: left; 
  • 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.

Try It

  • Task: Create the layout using the box model by adding the right box inside the container independently.
  • We should now have a topbox, a container box and a left box that is 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.

Code It

  • We have now three boxes. 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 minature schnauzer. He is 8 months old. will show up as the first line in this case
  • If I want the paragraph appear in the right box, I need to move the line inside the definition of the rightbox.
  • It's the same for the hyperlink. I need to move it to the inside of the left box.
  • This is the body section of the index.html file after the moving:


  • 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.

Test It

  • 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:



Badge It - Self Assessment

learning strand: Programming and Development

  • 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.

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