Let's get started with DIV Layout!

  1. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Click: New -> File
    4. Name the file: divs.html
    5. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    6. Copy the Div Layout Page Template (HTML) code (below)
    7. Paste that code into your new divs.html file
    8. Change the title and author information
    9. Change: This is the header area. Put your information here! to the code from your home page including your <h2>, <p>, and <img> tags code
    10. Change the words: Left Column, Middle Column, Right Column to an appropriate link for each lab.
      For example, change the first Left Column
      to: <p><a href="index.html">Lab 1</a>: Home Page</p>
      <p>This lab is my first web page</p>
    11. Change the date the page was last modified
    12. Copy the Styles for Div Layout Page Template (CSS) code
    13. Paste that code into your styles.css file
    14. Change some of the styles (colors, fonts, sizes, etc.)
    15. Click click on your index.html file
    16. Add a link to this lab.
      Change: <li>Create a Divs Page</li>
      to: <li><a href="divs.html">Create a Divs Page</a></li>
    17. Save your changes
    18. Click: Run
    19. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    20. View your web page
    21. Make any changes
    22. Save your changes

Divs Layout Page Template (HTML)

<!doctype html>
  <html>
    <head>
      <title>page title goes here</title>
      <!-- Author: put your name in this comment line -->
      <link href="includes/styles.css" rel="stylesheet"/>
   </head>
   <body>
     <div id="main">
       <div id="head">
         This is the header area. Put your information here!
       </div> <!-- end id="head" -->
       <div class="leftcol">
         <p>Left Column</p>
       </div> <!-- class="leftcol" -->
       <div class="midcol">
         <p>Middle Column</p>
       </div> <!-- class="midcol" -->
       <div class="rightcol">
         <p>Right Column</p>
       </div> <!-- class="rightcol" -->
       <div class="leftcol">
         <p>Left Column</p>
       </div> <!-- class="leftcol" -->
       <div class="midcol">
         <p>Middle Column</p>
       </div> <!-- class="midcol" -->
       <div class="rightcol">
         <p>Right Column</p>
       </div> <!-- class="rightcol" -->
       <div class="leftcol">
         <p>Left Column</p>
       </div> <!-- class="leftcol" -->
       <div class="midcol">
         <p>Middle Column</p>
       </div> <!-- class="midcol" -->
       <div class="rightcol">
         <p>Right Column</p>
       </div> <!-- class="rightcol" -->
       <div class="leftcol">
         <p>Left Column</p>
       </div> <!-- class="leftcol" -->
       <div class="midcol">
         <p>Middle Column</p>
       </div> <!-- class="midcol" -->
       <div class="rightcol">
         <p>Right Column</p>
       </div> <!-- class="rightcol" -->
       <div id="foot">
         This is the footer area. Put your information here!
       </div> <!-- end id="foot" -->
     </div> <!-- id="main" -->
     <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
   </body>
 </html>

Styles for Div Layout Page Template (CSS)

body {
  background-color: #DDD;
} 
#head, #foot {
  background-color: #DDD;
  border: 1px ridge navy;
  border-radius: 22px;
  box-shadow: 10px 10px 5px #888888;     
  clear: both;     
  margin: 1% 4% auto;    
  padding: 1%;     
  width: 90%;     
}     
#main {     
  background-color: #CCC;     
  border: 1px ridge navy;     
  border-radius: 22px;     
  margin: 1% 4% auto;     
  padding: 1% 1% 2% 1%;     
  width: 90%;     
}     
.leftcol {     
  background-color: #FFF;     
  border: 1px ridge navy;     
  border-radius: 22px;     
  box-shadow: 10px 10px 5px #888888;  
  float: left;     
  margin: 1% 1% 1% 4%; 
  padding: 1%;     
  width: 25%;     
}     
.midcol {     
  background-color: #FFF;     
  border: 1px ridge navy;     
  border-radius: 22px;     
  box-shadow: 10px 10px 5px #888888;     
  float: left;     
  margin: 1% 1% 1% 4%;     
  padding: 1%;     
  width: 25%;     
}     
.rightcol {     
  background-color:#FFF;     
  border: 1px ridge navy;     
  border-radius: 22px;     
  box-shadow: 10px 10px 5px #888888;     
  clear: right;     
  float: right;     
  margin: 1% 4% 1% 1%;       
  padding: 1%;       
  width: 25%;     
}

Example