10 Replies Latest reply: Jan 27, 2013 4:11 AM by FeZEC RSS

    Why do columns, gutters and images expand beyond containers in CS6 HTML5 Fluid Layout?

    nginzler1 Community Member

      Why do columns, gutters and images expand beyond containers in CS6 HTML5 Fluid Layout as browser window is enlarged and reduced (Firefox, Chrome & Safari)? Images also distort as you get close to the device size break. Everything sizes correctly in DreamWeaver Design View. http://www.nicolaginzler.com/rkadrey/aloha3.htm

       

      CSS:

      @charset "UTF-8";

      /* 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:    22;

          dw-gutter-percentage:    10;

         

          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: 89.3454%;

          padding-left: 0.8272%;

          padding-right: 0.8272%;

      }

      #LayoutDiv1 {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #header {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #mainNav {

          clear: none;

          float: left;

          margin-left: 1.8518%;

          width: 100%;

          display: block;

      }

      #image {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #content {

          clear: none;

          float: left;

          margin-left: 1.8518%;

          width: 100%;

          display: block;

      }

       

      /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

       

      @media only screen and (min-width: 481px) {

      .gridContainer {

          width: 91.9431%;

          padding-left: 0.5284%;

          padding-right: 0.5284%;

      }

      #LayoutDiv1 {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #header {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #mainNav {

          clear: none;

          float: left;

          margin-left: 1.1494%;

          width: 100%;

          display: block;

      }

      #image {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #content {

          clear: none;

          float: left;

          margin-left: 1.1494%;

          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: 89.628%;

          max-width: 1232px;

          padding-left: 0.1859%;

          padding-right: 0.1859%;

          margin: auto;

      }

      #LayoutDiv1 {

          clear: both;

          float: left;

          margin-left: 0;

          width: 100%;

          display: block;

      }

      #header {

          clear: both;

          float: left;

          margin: 5.76298701% 0 0 0;

          width: 40.6639%;

          display: block;

      }

      #mainNav {

          clear: none;

          float: left;

          margin: 8.68506494% 0 0 0;

          width: 54.3568%;

          display: block;

          margin-left: 4.9792%;

      }

      #image {

          clear: both;

          float: left;

          margin: 4.13961039% 0 0 0;

          width: 40.6639%;

          height: auto;

          display: block;

      }

      #content {

          clear: none;

          float: left;

          margin: 4.13961039% 0 0 0;

          width: 54.3568%;

          height: auto;

          display: block;

          margin-left: 4.9792%;

      }

      }