title: 3 Column Site Columns Floated Left But Not Appearing in Correct Order
body: <p>I'm working on a 3 column site which I am converting to a RWD and which was previously laid out with nasty neg px margins but I am converting all this to percentages and em's so that the site will best suit a wide range of devices.</p>
  
  <p>My problem is very similar to the post that can be seen here;
  <a href="https://stackoverflow.com/questions/8287265/html-float-right-element-order">HTML float right element order</a></p>
  
  <p>I have tried what was suggested in this article by @bookcassey by placing all the columns in a container which is floated right with all the child elements inside floated left but even doing this I still can't get the columns in order of #NavColumn #ContentColumn #ExtraColumn.</p>
  
  <p>The HTML is </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;title&gt;3 Col Page&lt;/title&gt;
  
  &lt;meta name='description' content='Sample 3 Column Page'&gt;
  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="./support-files/landscapemobile.css" /&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" /&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="PageWrapper"&gt;
      &lt;div id="Header"&gt;
      &lt;div class="Liner"&gt;
  
      Header Links Etc
  
      &lt;/div&gt; &lt;!-- End Header Liner --&gt;
      &lt;/div&gt; &lt;!-- End Header --&gt;
  
      &lt;!-- Begin Center Column Content --&gt;
      &lt;div class="OuterBG threecol"&gt; &lt;!-- disregard. There are no rules for this. This was part of a tut--&gt;
      &lt;div class="MidBG"&gt; &lt;!-- disregard. There are no rules for this. This was part of a tut--&gt;
      &lt;div class="InnerBG"&gt;
      &lt;div id="ContentColumn"&gt; &lt;!-- col1 in tut --&gt;
      &lt;div class="Liner"&gt;
  
  &lt;h1&gt;Page Headline&lt;/h1&gt;
  
  Page Content, Images Lorem Upsim etc...
  
  &lt;/div&gt; &lt;!-- End Content Column --&gt;
  &lt;/div&gt; &lt;!-- End Liner --&gt;
  
  &lt;div id='NavColumn'&gt;
  &lt;div class='Liner'&gt;
  &lt;div class='Navigation'&gt;
  Site 
  Navigation
  Links
  &lt;/div&gt;&lt;!-- end Navigation --&gt;        
  &lt;/div&gt;&lt;!-- end Navigation Liner --&gt;
  &lt;/div&gt;&lt;!-- end NavColumn --&gt;
  
  &lt;div id='ExtraColumn'&gt;
  &lt;div class='Liner'&gt;
  Extra
  Column 
  Content
  &lt;/div&gt;&lt;!-- END Extra Column Liner--&gt;
  &lt;/div&gt;&lt;!-- END ExtraColumn --&gt;
  
  
  &lt;/div&gt;&lt;!-- END colleft --&gt;
  &lt;/div&gt;&lt;!-- END colmid --&gt;
  &lt;/div&gt;&lt;!-- END colmask and threecol --&gt;
  &lt;div id='Footer'&gt;
  Footer Content, Address etc...
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- END PageWrapper --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>#PageWrapper{ 
      margin:1em auto;
      max-width:60em; /*960px / Default Font Size of 16px = em result*/
      border:0.3125em groove #DDDDDD;
      background-image:url(../image-files/background.gif);
      background-repeat:repeat-y;
  }
  
  .InnerBG{float:right;/*border:3px solid red;*/width:100%;}
  
  #Header{position:relative;}
  
  #Header .Liner{padding:0;}
  
  #Header a.header-home-link{max-width:60em;display:block;}
  
  #Header img{display:block;}
  
  #ShareThis{width:100%;margin:1em auto 2em;}
  
  #NavColumn, #ContentColumn, #ExtraColumn {float:left;}
  
  #ContentColumn{max-width:62.50%;/*border:2px solid green;*/width:100%;}
  
  #NavColumn{max-width:18.645833333%;text-align:center;font-size:90%;color:#000;width:100%;}
  
  #ExtraColumn{max-width:18.645833333%;text-align:center;font-size:90%;color:#000;width:100%;}
  </code></pre>
  
  <p>Side Note: The colored columns were something I was trying to "See" each column</p>
  
  <p>I've been through an untold number of tutorials and have been working on this for longer than I care to admit while trying every possible combination of CSS rules to no avail and if anyone knows how I could remedy the way the columns are displaying as can be seen here: <a href="http://classifieds.your-adrenaline-fix.com/" rel="nofollow noreferrer">http://classifieds.your-adrenaline-fix.com/</a>, I'd be MOST appreciative and I thank each and everyone of you in advance.</p>