Skip navigation
nginzler1
nginzler1 Calculating status...
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%;

}

}

909 Views   10 Replies   Latest reply: FeZEC, Jan 27, 2013 4:11 AM
 
Replies
  • FeZEC
    Currently Being Moderated
    1. FeZEC,
    Jan 25, 2013 7:48 AM   in reply to nginzler1
    Report

    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:
  • nginzler1
    Currently Being Moderated
    2. nginzler1,
    Jan 25, 2013 6:52 PM   in reply to FeZEC
    Report

    Thanks! There WERE inline width/height values.  I took them out and the images don't distort anymore. The column/gutter problem is still there though. http://www.nicolaginzler.com/rkadrey/aloha3.htm. Here's my Fiddle link: http://jsfiddle.net/nginzler/hV3qx/. It doesn't have the images or the Spry Menu Bar files though.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Jan 26, 2013 11:09 AM   in reply to nginzler1
    Report

    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:
  • FeZEC
    Currently Being Moderated
    4. FeZEC,
    Jan 26, 2013 1:35 PM   in reply to Nancy O.
    Report

    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:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Jan 26, 2013 2:59 PM   in reply to FeZEC
    Report

    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:
  • FeZEC
    Currently Being Moderated
    6. FeZEC,
    Jan 26, 2013 3:13 PM   in reply to Nancy O.
    Report

    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:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Jan 26, 2013 3:41 PM   in reply to FeZEC
    Report

    Agreed

     

    N

     
    |
    Mark as:
  • nginzler1
    Currently Being Moderated
    8. nginzler1,
    Jan 26, 2013 5:42 PM   in reply to Nancy O.
    Report

    FeZEC and Nancy,

     

    Thank you both. The image distortion is OK now.

     

    Nancy, I saw your Fluid Grid page -- that's the kind of resizing I want to

    have, with the gutters between the columns staying relatively narrow as you

    resize the window, and the content staying within the columns. On my page

    the gutters and columns are still way too wide at desktop size, then they

    shrink as I make the window smaller. They're OK once I get to the tablet

    and mobile sizes.

     

    Also, sorry to be a bit clueless, but I can't see how to Reply on the forum

    -- I can see the whole discussion, just not a Reply button. If I can reply

    from there I can attach a screenshot of the problem.

     

    Thanks,

     

    Nicola

     
    |
    Mark as:
  • nginzler1
    Currently Being Moderated
    9. nginzler1,
    Jan 27, 2013 12:15 AM   in reply to nginzler1
    Report

    Found the Reply button, it was right in front of me .

     

    Here are the screenshots. HTML and CSS is at http://jsfiddle.net/nginzler/hV3qx/2/. Please let me know if you have any ideas. THANK YOU!

    • RK_desktop1.jpg (below) has very wide gaps between the image and column, and the container width is much more than 1232px which is what it's supposed to be. RK_desktop1.jpg
    • RK_desktop2.jpg (below) still has pretty wide gaps.
    • RK_desktop2.jpg
    • RK_tablet1.jpg (below) is fine.
    • RK_tablet1.jpg
    • RK_mobile1.jpg (below) is fine.
    • RK_mobile1.jpg
     
    |
    Mark as:
  • FeZEC
    Currently Being Moderated
    10. FeZEC,
    Jan 27, 2013 4:11 AM   in reply to nginzler1
    Report

    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:
Actions

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