title: Doing a design prototype of a website for a class using HTML with CSS. CSS isn't working and I'm not sure where I'm going wrong
body: <p>I've designed a simple wireframe seen here: <a href="http://i.imgur.com/APIdBZ0.png" rel="nofollow">http://i.imgur.com/APIdBZ0.png</a></p>
  
  <p>I'm trying to recreate this in HTML &amp; CSS so I can just build on it.  </p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt; 
  &lt;head&gt; 
  &lt;title&gt; Trinity FC &lt;/title&gt; 
  
  &lt;style type="text/css" media="all"&gt; 
  @import "trinityfc.css"; 
  &lt;/style&gt; 
  
  &lt;/head&gt;
  
  
  &lt;body&gt; 
  &lt;div id="container"&gt; 
  
      &lt;div id="header"&gt;
      &lt;h1&gt;Main Heading And Logo &lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div id="Column1"&gt;
  
  
          &lt;div id="side"&gt;
  
  
  
                  &lt;div id="menu"
                  &lt;p&gt;menu sample text sample text sample text sample text sample text sample text sample text sample text&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="table"
                  &lt;p&gt;table sample text sample text sample text sample text sample text sample text sample text sample text&lt;/p&gt;
                  &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;div id="Column2"&gt;
  
          &lt;div id="news"&gt;
  
                  &lt;div id="newspic"&gt;
                  &lt;p&gt;News Picture sample text sample text sample text sample text sample text sample text sample text sample text&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="newstext"&gt;
                  &lt;p&gt;News Text sample text sample text sample text sample text sample text sample text sample text sample text&lt;/p&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="footer"
          &lt;p&gt;Footer and Copyright Information&lt;/p&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  &lt;/div&gt; 
  
  &lt;/body&gt; 
  </code></pre>
  
  <p>To clarify the div tags, "Column1" Consists of "side" which consists of "menu" and "table". </p>
  
  <p>"menu" corresponds to the green menu box in the wireframe image.</p>
  
  <p>"table" corresponds to the red league table box in the wireframe image.</p>
  
  <p>"Column2" consists of "news" (which consists of "newspic" and "newstext"), as well as "footer".</p>
  
  <p>"newspic" corresponds to the yellow news image - headline box in the wireframe image.</p>
  
  <p>"newstext" corresponds to the orange news text preview box in the wireframe image.</p>
  
  <p>"footer" corresponds to the grey footer box in the wireframe image.</p>
  
  <p>CSS</p>
  
  <pre><code>body{
  background: #F3F2E8;
  color: #51463D;
  font: normal 100%/1#5 "Lucida Grande", "Lucida sans"; 
  padding: 1em;
  }
  
  h1  {
      color: #A14141;
      font: normal 1#5em Georgia, serif;
      margin: 0;
  }
  
  em  {
      font-family: Palatino, Georgia, Times, serif;
  }
  
  img     {
      max-width: 100%;
  }
  
  #container 
  { 
  background-color:#F0F5F3
  }
  
  #header {  
  background-color:blue; 
  width: 100%
  
  }
  
  #column1 {  
  width:22.5%;
  float:left;
  
  }
  
  #side { 
  background-color:white; 
  width:100%;
  height:100%;
  
  }
      #menu {  
      background-color:green; 
      width:95%;
      height:45%;
      }
  
      #table { 
      background-color:red; 
      width:95%;
      height:45%;
      }
  
  
  
  #column2 {  
  width:72.5%;
  height:85%;
  float:left;
  }
  
      #news { 
      background-color:black; 
      width: 100%;
      }
          #newspic { 
          background-color:yellow; 
          width:100%;
          height:70%;
          }
  
          #newstext { 
          background-color:#FF6600; 
          width:100%;
          height:30%;     
          }
  
      #footer { 
      background-color:grey; 
  
      }
  </code></pre>
  
  <p>This leaves me with the page looking like this: <a href="http://i.imgur.com/xes3uDl.png" rel="nofollow">http://i.imgur.com/xes3uDl.png</a></p>
  
  <p>I was in class with my tutor a few days ago and they could not immediately spot what was wrong with the code.  I told them I would take it home and look over it again to see what the issue was,  but I still can't crack it.  Can anyone see what is wrong at a glance?</p>