title: How to fix my CSS and make my site look blog- or magazine-like?
body: <p>This is the code for my site, CSS is as <code>&lt;style&gt;&lt;/style&gt;</code> even though it's as an external stylesheet in the original basically:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="magazinetheme.css"&gt;
  </code></pre>
  
  <p>This is the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;TITLE&gt;A Guide Book on Tourism&lt;/TITLE&gt;
  &lt;style&gt;
    div {
      background-color: lightgrey;
      width: 300px;
      border: 5.2px solid green;
      padding: 25px;
      margin: 25px;
      font-family: Arial, sans-serif;
      font-size: 14px;
      float: left;
    }
    .div1 {
      background-color: lightgrey;
      width: 500px;
      border: 2px solid red;
      height: auto;
      padding: 25px;
      margin: 25px;
      font-family: Arial, sans-serif;
      font-size: 12px;
      float: left;
    }
  
    .div2 {
      background-color: #FFF;
      width: 300px;
      border: 2px solid red;
      padding: 25px;
      margin: 25px;
      font-family: Arial, sans-serif;
      font-size: 12px;
      float: left;
    }
  
    img.auto {
      width: 425px;
      margin-left: auto;
      margin-right: auto;
    }
    .datetime {
      font-style: oblique;
    }
    .wv {
      display: block;
    }
  &lt;/style&gt;
  &lt;div&gt;
  &lt;/div&gt;
  &lt;div class="div1"&gt;
  
    &lt;article&gt;&lt;H1&gt;My page&lt;/H1&gt;
      &lt;p&gt;&lt;span class="datetime"&gt;02 Jul 2016&lt;/span&gt;&lt;/p&gt;
      &lt;section class="wv"&gt;&lt;img class="auto" src="placeholderpic.jpg"&gt;&lt;/section&gt;
    &lt;/article&gt;
    &lt;p&gt;Your text here&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="div2"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS works well - but I want to add a header, and generally have CSS more like this site: <a href="http://www.autocarindia.com/auto-news/ford-mustang-india-launch-on-july-13-2016-402469.aspx" rel="nofollow noreferrer">with links in header and a menu</a>.</p>
  
  <p>How can I improve my CSS to create a menu/header that can have a dropdown with some basic JavaScript and is compatible with older browsers? [I have User Agent Switcher on Firefox for testing, on OS X El Capitan 10.11.5].</p>
  
  <p>I had considered jQuery, but am not sure if it is suited to older browsers.</p>
  
  <p>Basically - I want to fix my layout and make it look more blog or magazine-like whilst retaining backward-compatibility for older browsers across Windows, Linux and Mac OS X. This is for a PHP based site but it is a template/layout I have created independently; the PHP blog is one I have been working on from a basic website tutorial on creating your own PHP blog.</p>