CSS Layouts: Replacing the Table…

Instructions2

  1. The divs will have these corresponding sizes and borders around them. Please note that the border is to help you recognize what each section of the div is doing. :) 
    1. #container {
  width: 760px;
  border: 1px solid black;
}
    2. #header {
  border: 1px solid red;
}
    3. #top {
  border: 2px solid orange;
}
  2. It should look like this: Header Div 
    1. #middle {
  border: 1px solid blue;
  background: #fff;
}
    2. #left {
  border: 2px solid #0066ff;
  float: left;
  width: 160px;
}
    3. #content {
  float: left;
  width: 440px
  border: 2px solid green;
}
    4. #right {
  float: right;
  width: 140px
  border: 2px solid #0066ff;
}
    5. #clear {
  clear: both;
  height: 10px;
  border: 2px solid purple;
}
  3. It should look like this: Content Div 
    1. #footer {
  width: 100%;
  border: 2px solid #red;
}
  4. It should look like this: Footer Div

Back: Instructions1

Next: Table of Contents

Techrangers SM | October 26, 2004