title: Dreamweaver Preview Browser different from Actual Webpage HTML CSS
body: <p>I have created a webpage with multiple fluid divisions. In the website browser they are lined up in horizontal a row as they should be. When the page is actually uploaded to the site, they are vertical, appearing one underneath another.</p>
  
  <p>Here is the following CSS sheet used: </p>
  
  <pre><code>@charset "utf-8";
  @import url("Ubuntu_L/stylesheet.css");
  
  /* Simple fluid media
     Note: Fluid media requires that you remove the media's height and width attributes from the HTML
     http://www.alistapart.com/articles/fluid-images/ 
  */
  img, object, embed, video {
      max-width: 100%;
  }
  /* IE 6 does not support max-width so default to width 100% */
  .ie6 img {
      width:100%;
  }
  
  /*
      Dreamweaver Fluid Grid Properties
      ----------------------------------
      dw-num-cols-mobile:     5;
      dw-num-cols-tablet:     8;
      dw-num-cols-desktop:    10;
      dw-gutter-percentage:   25;
  
      Inspiration from "Responsive Web Design" by Ethan Marcotte 
      http://www.alistapart.com/articles/responsive-web-design
  
      and Golden Grid System by Joni Korpi
      http://goldengridsystem.com/
  */
  
  /* Mobile Layout: 480px and below. */
  
  .gridContainer {
      margin-left: auto;
      margin-right: auto;
      width: 87.36%;
      padding-left: 1.82%;
      padding-right: 1.82%;
  }
  #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv2 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv3 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv4 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv5 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv6 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv7 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv8 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv9 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  
  /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
  
  @media only screen and (min-width: 481px) {
  .gridContainer {
      width: 90.675%;
      padding-left: 1.1625%;
      padding-right: 1.1625%;
  }
  #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv2 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv3 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv4 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv5 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv6 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv7 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv8 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv9 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  }
  
  /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
  
  @media only screen and (min-width: 769px) {
  .gridContainer {
      width: 88.2%;
      max-width: 1232px;
      padding-left: 0.9%;
      padding-right: 0.9%;
      margin: auto;
  }
  #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 59.1836%;
      display: block;
  }
  #LayoutDiv2 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 18.3673%;
      display: block;
  }
  #LayoutDiv3 {
      clear: none;
      float: left;
      margin-left: 2.0408%;
      width: 18.3673%;
      display: block;
  }
  #LayoutDiv4 {
      clear: none;
      float: left;
      margin-left: 2.0408%;
      width: 18.3673%;
      display: block;
  }
  #LayoutDiv5 {
      clear: none;
      float: left;
      margin-left: 2.0408%;
      width: 18.3673%;
      display: block;
  }
  #LayoutDiv6 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  #LayoutDiv7 {
      clear: none;
      float: left;
      margin-left: 2.0408%;
      width: 18.3673%;
      display: block;
  }
  #LayoutDiv8 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 18.3673%;
      display: block;
  }
  #LayoutDiv9 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
  }
  }
  </code></pre>
  
  <p>I think this is a widespread problem. Any suggestions would be really appreciated!</p>
  
  <p>Thankyou - </p>
  
  <p>Andrew</p>
  
  <p>EDITS:</p>
  
  <p>Please see a snippet of the html below:</p>
  
  <pre><code>  &lt;div id="LayoutDiv3"&gt;
  &lt;p&gt;&lt;strong&gt;Medical &lt;br&gt;
    &lt;/strong&gt;&amp;nbsp;Condition 1
    &lt;input type="checkbox" name="Condition 1" value="Yes" /&gt;
    &amp;nbsp;&amp;nbsp; &lt;br&gt;
    Condition 2
    &lt;input type="checkbox" name="Condition 2" value="Yes" /&gt;
    &amp;nbsp;&amp;nbsp; &lt;br&gt;
    Condition 3
    &lt;input type="checkbox" name="Condition 3" value="Yes" /&gt;
    &amp;nbsp;&amp;nbsp; &lt;br&gt;
    Condition 4
    &lt;input type="checkbox" name="Condition 4" value="Yes" /&gt;&lt;/p&gt;
  &lt;br /&gt;
    &lt;br /&gt;        
    &lt;/div&gt;
  
    &lt;div id="LayoutDiv4"&gt;
  &lt;p&gt;  &lt;strong&gt;Dietary&lt;/strong&gt;
  &lt;p&gt;Type 1
    &lt;input type="checkbox" name="Type1" value="Yes" /&gt;
    &amp;nbsp;&amp;nbsp; Type 2
    &lt;input type="checkbox" name="Type 2" value="Yes" /&gt;
    &amp;nbsp;
  &lt;p&gt;&amp;nbsp; Type 3
    &lt;input type="checkbox" name="Type 3" value="Yes" /&gt;
    &amp;nbsp;&amp;nbsp; Type 4
    &lt;input type="checkbox" name="Type 4" value="Yes" /&gt;
  
    &lt;br /&gt;
    &lt;br /&gt;
  &lt;/div&gt;
  </code></pre>