title: How to use div classes to get my blocks to line up?
body: <p>I am creating a website for my assignment for university. My teacher told me to use div classes so that my CSS code will be reduced but here are the problems. I have div class for images and they are supposed to be next to each other in a same row.</p>
  
  <p>I have another 3 div class boxes for text which should be below divs with images, and also I have 2 background images one of them should be on left hand side and other one on right so it creates a flag of Italy. I have tried everything I can thing of but I still cannot make it work properly. Can anyone help?</p>
  
  <p><a href="http://filedropper.com/fail" rel="nofollow">This is what I want to achieve roughly</a></p>
  
  <p><a href="http://jsfiddle.net/p2uwm8ye/" rel="nofollow">http://jsfiddle.net/p2uwm8ye/</a> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt; &lt;!-- This is standard HTML code that tells the browser it is a HTML page--&gt;
  &lt;html lang="en-GB"&gt; &lt;!-- This tells the browser what language html is using--&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;link href="CSS/style.css" rel="stylesheet" type="text/css"&gt; &lt;!-- This is linking style sheet (css)into this HTML page--&gt;
      &lt;title&gt;Main Page&lt;/title&gt; &lt;!-- This is a code that displays title of the page--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header id="pageHeader"&gt;&lt;!-- This header tag is used to create a navigation bar--&gt;
      &lt;nav id="site"&gt;&lt;!-- This is a navigation tag which allows to link different webpages together--&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home Page&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="html/tables.html"&gt;Tables&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="html/forms.html"&gt;Feedback&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="html/text.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="html/references.html"&gt;References&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="html/validation.html"&gt;Validation&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt; 
      &lt;/nav&gt;
  &lt;/header&gt;
      &lt;div id="welcome"&gt;&lt;!-- This is a div tag that is used to create a welcome message on my website--&gt;
      &lt;h1&gt;Papa Italiano&lt;/h1&gt;
  &lt;/div&gt;
              &lt;div class="images"&gt;&lt;!-- This div class I have used to put three images using just one piece of css code which reduced the code--&gt;
              &lt;figure&gt;
                  &lt;img src="images/image11.jpg" alt="photo" /&gt;
                  &lt;figcaption&gt;Food 1&lt;/figcaption&gt;  
              &lt;/figure&gt;
          &lt;/div&gt;
          &lt;div class="images"&gt;
              &lt;figure&gt;
                  &lt;img src="images/image22.jpg" alt="photo" /&gt;
                  &lt;figcaption&gt;Food 2&lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
          &lt;div class="images"&gt;
              &lt;figure&gt;
                  &lt;img src="images/image32.jpg" alt="photo" /&gt;
                  &lt;figcaption&gt;Food 3&lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
              &lt;div class="text"&gt;&lt;/div&gt;&lt;!-- similar to div class for images however this is for text--&gt;
              &lt;div class="text"&gt;&lt;/div&gt;
              &lt;div class="text"&gt;&lt;/div&gt;
      &lt;div class="clearing"&gt;&lt;/div&gt;&lt;!-- this div class is basically making sure that my other div classes will not go into each other--&gt;
  &lt;/div&gt;
          &lt;div id="background"&gt;
              &lt;figure&gt;
                  &lt;img src="images/background1.jpg" alt="background photo" /&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
          &lt;div id="background2"&gt;
              &lt;figure&gt;
                  &lt;img src="images/background2.jpg" alt="background photo" /&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the css</p>
  
  <pre><code>header#pageHeader{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 1024px;
      height: 80px;
      background-color: black;
      opacity: 0.5;
  }/* this is my css for a navigation bar*/
  nav#site li{
      list-style:none;
      display:inline-block;
      zoom:1;
      width:160px;
  }/*This is used to style my links*/
  nav a{
      text-decoration: none;
      color: #FF0;
  }/* This is used to style look of the links*/
  .images{
      float: left;
      width: 250px;
      border-style: solid;
      border-width: 3px;
      padding: 10px;
      margin: 30px;
      z-index: 1;
      vertical-align: middle;
  }/*This is telling my all div class images how they need to be styled*/
  #welcome{
      position: relative;
      top: 100px;
      left: 300px;
      width: 300px;
      height: 80px; 
      font: arial;
      font-size: 23px;
      color: green;
      margin-bottom: 75px;
  }/*This is telling browser how to style my div welcome*/
  .text{
      position: relative;
      height: 300px;
      width: 250px;
      left: 0px;
      float: left;
      border-style: solid;
      border-width: 3px;
      margin: 100px;
      display: inline-block;
  }/*Similar to .images however this piece of codes is used for my text*/
  #background{
      height: 80px;
      width: 250px;
      left: 0px;
  }
  #background2{
      height: 80px;
      width: 250px;
      right: 0px;
  }
  .clearing{
      clear: both;
  }
  </code></pre>