Skip navigation
nginzler1
Currently Being Moderated

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

Jan 23, 2013 9:11 PM

Tags: #website #html #dreamweaver #mobile #css #html_code_writing #html5 #cs6 #html_5 #grid #fluid #css_style

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

}

}

 
Replies
  • Currently Being Moderated
    Jan 25, 2013 7:48 AM   in reply to nginzler1

    The Distortion of the img is probably due to specifying a height value inline. It's hard to tell cause your HTML is not being shown.  Can you post a link to a Fiddle?   http://jsfiddle.net/   Reasons why columns and gutters expand are plentiful. There are many things that can be causing this. But it would be easiest to view the fiddle if you can provide it.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 11:09 AM   in reply to nginzler1

    I don't know why FeZEC is telling people to post code on Fiddle.   A link to your page is all that we require here because we can view source in browsers to see all the code (CSS, HTML, JavaScripts, etc...).

     

    I don't really see a problem with your page.  Unless I'm missing the point of your question, that's pretty much the expected behavior with FGLayouts.

     

    I have a FGL test page below that behaves the same way when browser viewport is resized.

    http://alt-web.com/FluidGrid/Fluid.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 1:35 PM   in reply to Nancy O.

    The reason why I ask for the fiddles Nancy, is because in the first two posts, we were supplied a strip of CSS and then the html code that is used which viewing code this way is not conveneint. Posting a fiddle allows us to see both those at the same time as well as make changes to the code for testing whereas if someone posts a simple .html page with js css and html it makes it harder for anyone trying to help to do so.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 2:59 PM   in reply to FeZEC

    FeZEC,

    In the first post, the OP correctly gave us a URL to the problem page.  A URL is always the best way to get help here.   With a URL, we can see everything we need in the source code. And we can edit debug and validate the code from within our browsers with our web developer toolbars.   It just saves everyone a lot of time if we can see the live page in our browsers.

     

    Now if the problem page contains PHP, ASP or CF server-side code, obviously we cannot see that in our browsers.  So then using Fiddle or just pasting code in the forums is perfectly OK.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 3:13 PM   in reply to Nancy O.

    Nancy o.  Thanks for the input. In the end we're both helping people in our own ways. key words helping, and in our own ways; to help the person get there. That's what matters.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 3:41 PM   in reply to FeZEC

    Agreed

     

    N

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 27, 2013 4:11 AM   in reply to nginzler1

    Can you do me a favor and add width:100% where you specify img{   max-width:100%; }  It might be line 6 on your .css;    The reason for the gap between the image and the column is because the image is not full width.  Now if you wanted the book to never be larger than as it shows in the first image, then the #image wrapper needs to be specified that it can not be wider than the exact width of the image.

    this link shows #image max-width 319px; which is the maximum width of the image.  http://jsfiddle.net/fezec/sMTnr/2/   this link shows the img{ width:100% } ;  http://jsfiddle.net/fezec/8PGFs/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points