SUCCEED

Creating a Two-Column Layout

• Introduce the two-column layout idea.
• Explain divs then divide the current content into three divisions: header, links, content
• Explain how to define divs in CSS. Each div will be assigned an identifier (id), and then we'll define that id in CSS. All id's are indicated by "#" in CSS. Give each of the three divs borders and backgrounds.
  

  	#header {
  	  border: 2px solid blue;
  	  background: orange; 
  	}
  	
  	#links {
  	  border: 2px solid blue;
  	  background: orange; 
  	}
  	
  	#content {
  	  border: 2px solid blue;
  	  background: orange; 
  	}

• Introduce height/width width: 200px; . Give a specific width to the links div.
• Float the links div to the right float: right; . (For this to work you must have a set width for links, not content, and links must go before content in HTML.)
• Introduce padding padding: 20px; and margin margin: 20px; . Use diagram to help explain. Mention specifying left, right, top, bottom. Mention using margin margin: auto; to center.