title: Need Help with Generic HTML/CSS Layout
body: <p>I've been designing websites for a while now and haven't had any complaints, surprisingly. But, there's one thing that bothers me quite a bit. I'm slow. It takes me, on average about an hour to style 1 webpage (a full webpage incl. content, images, text and so on) - and I don't know if that's how long it takes most people?</p>
  
  <p>And I always run into the same problems over and over again (even though each time I use a different way, based on what I learned last time), which causes me to constantly re-align, re-adjust, re-write.</p>
  
  <p>I know I'm doing something wrong, but I just don't know where anymore. When my pages are finished, they're great, but there's always some very tiny, but noticeable differences between each browser - and it really <strong>*</strong> me.</p>
  
  <p>Below is HTML &amp; CSS for a generic, empty webpage. Maybe you could be so kind as to tell me what you think is wrong with it, and how I might be able to better it?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="" /&gt;
  
      &lt;meta name="author" content="My Name" /&gt;
      &lt;meta name="keywords" content="sample, keywords, keyphrase" /&gt;
      &lt;meta name="description" content="A sample description." /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="Wrapper"&gt;
        &lt;div class="Header"&gt;
          &lt;div class="PresentationArea"&gt;
            &lt;div class="LeftSide"&gt;
              &lt;img src="" alt="" class="" /&gt;
            &lt;/div&gt;
            &lt;div class="RightSide"&gt;
              &lt;h1&gt;Heading&lt;/h1&gt;
              &lt;p class="PresentationDescription"&gt;&lt;/p&gt;
  
              &lt;a href="" alt="" class="StyledButtonLink"&gt;Learn More&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ContentArea"&gt;
          &lt;h2&gt;&lt;/h2&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="Footer"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* RESET -SOME- STUFF */
  *{border:0;border:none;padding:0;margin:0;}
  
  body {
  }
  
  a {
  }
  
  p {
  }
  
  h1,h2 {
  }
  
  .Wrapper {
    width: 960px;
    height: 100%;
  
    margin: 0 auto;
  }
  
  .Header {
    width: 100%;
    height: 31px;
  
  
  }
  
  .PresentationArea {
    padding: 5px 0 0 0;
  }
  
  .LeftSide {
    width: 65%;
    height: 250px;
  }
  
  .RightSide {
    width: 35%;
    height: 250px;
  }
  
  .PresentationDescription {
  
  }
  
  .StyledButtonLink {
  }
  
  .ContentArea {
    width: 100%;
    height: 350px;
  }
  
  .Footer {
    width: 100%;
    height: 31px;
  
  }
  </code></pre>
  
  <p>Any help is greatly appreciated</p>
  
  <p>Thank you</p>