Skip navigation
Currently Being Moderated

Fluid grid layout problem in IE and Firefox

Jun 21, 2012 9:38 PM

I just got DW CS6 and decided to try the fluid grid layout. This is my first try at doing it. I have 12 grid columns with 3 divs across the page. Each div spans 4 columns. In Opera, Safari and Chrome, everything works fine. However, in IE and Firefox, the div on the right side of the page drops down under the left div (the middle one and the left one stay where they belong). How do I fix this? The page is still a work in progress (obviously), but the url is http://www.brucebarrdesign.com/index_fluid.htm

Thanks

 
Replies
  • Currently Being Moderated
    Calculating status...
    Jun 22, 2012 9:11 AM   in reply to BruceMCE

    Hi

    I've only just upgraded to CS6 so not tried the feature myself yet, but I like fluid layouts so will be. The three colums all have the css style attributes:  width: 32.2033%; and margin-left: 1.6949%; in fluid_layout.css (1st colmn has a margin of 0).

     

    Now I don't know how familiar you are with web coding and this isn't the place to try to tutor you in it. The number of digits after the decimal tells me you've let DW assign these % entirely by itself without any guidance. Those measurements all add up a bit tight, to me, to 100% (I've not done the maths). I always allow a little leeway for the difference in the way the browsers calculate things - not so it's visually disturbing - but precisely to avoid this very problem. I'd round the figures down manually in the css styles dialogues or by editing the stylesheet directly.

    width: 32%; and margin-left: 1.5%;  checking the maths so I'd know how much % leeway that leaves.


    Like I said I've not used this feature myself yet so I don't know if there is somewhere to tell DW to round numbers down itself.

     

    Hope this helps.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 22, 2012 1:27 PM   in reply to BruceMCE

    The reason that the third column drops down under the first two is because the CSS does not provide enough room for the third column at the far right...... period.

    OK, so knowing the cause (not enought room), then we can trouble shoot.

    But doesn't everything just add up to under 100%? Well let's see.The left, mid, and right columns add up to ... dang near 100%

    But left column has added padding PLUS a border, mid col also has a border.

    Use the IE Developer Toolbar or Firebug to test your site live and edit/alter the various CSS in real time to see how to get that third column over to the right.

    http://www.microsoft.com/en-us/download/details.aspx?id=18359

    or Firefox Firebug:

    http://getfirebug.com/

    I played with a few new numbers and % in both Firebug and IE Develpoer Toolbar and was able to get the third column on the right by reducing a combination of widths, padding, and borders.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 22, 2012 1:55 PM   in reply to BruceMCE

    Fluid Grid seems to work best for Layouts only.   If you want additional styles, apply them to the content instead of the LayoutDivs.

     

    CSS:

     

    article {padding: 1%; border: 1px solid silver}

     

    HTML:

     

    <div id="LayoutDiv1">

         <article>

              content goes here

         </article>

    </div>

     

    <div id="LayoutDiv2">

         <article>

              content goes here

         </article>

    </div>

     

    <div id="LayoutDiv3">

         <article>

              content goes here

         </article>

    </div>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 5:01 PM   in reply to Nancy O.

    You know,  I have been looking for this same problem, tring to understand why my divs were not staying were i put them.  I could not figure it out, gave up and made another layout from scratch. My easy work around is to  Add 1 extra column to your layout.  Let it be the far right column.   Do all your spacing with the other columns.  Dont snap anything with a border this last column.   It will allow the other exrta pixels a place to fill in, and not cause the last div to drop to the next row.  You only need to do this if you want to have borders around your layout divs.

     

     

    This is a major "development error" problem that adobe missed when they made the fluid grid system.  It does not calculate the space correctly if you use a border property.

     
    |
    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