Skip navigation
RickChicago
Currently Being Moderated

Dreamweaver 12.0 - Fluid Grid Layout problem - I have 12 columns - but some DIV's are too wide

May 26, 2013 9:50 PM

http://skicmsc.org/NewResponsive.htm

 

Working on a new look for a current site.  I have 16 columns. Left div is 3 columns, next is 7 columns, then 3 and 3. Total: 16

 

The 7 column Div is pushing the right Div's off the layout by several "columns". If I delete the thing, everything is fine. Make it just 2 columns wide and the layout is messed up.  I've tried naming it different things, starting from scratch - twice. Still have the same problem. Deleted, recreated, moved up and down. Nested and not nested.  Next step is to say forget it.  Wasted four hours on this already.

 

Screen grab of the layout - all looks nice and clean.

buggy.jpg

Here's what it looks like (In Chrome, IE and Firefox.)

browcap.jpg

 

What's really annoying - undo/Ctrl-Z does not undo "visual" changes.  I can edit text, resize a Div by dragging the right handle, do an Undo - and my text edit is changed - not the resize.

 

Any suggestions?

 

Thanks

 

Rick Drew

 
Replies
  • Currently Being Moderated
    May 26, 2013 10:09 PM   in reply to RickChicago
     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2013 9:53 AM   in reply to RickChicago

    For best results, your LayoutDivs need to be wrapped inside the .gridContainer as it serves as the basic structure for your entire  layout (mobile, tablet and desktop).

     

    <div class="gridContainer clearfix">

         <div id="LayoutDiv1">

         </div>

         <div id="LayoutDiv2">

         </div>

         <div id="LayoutDiv3">

         </div>

         <div id="LayoutDiv4">

         </div>

    <!--end gridContainer--></div> 

     

    Design View Screenshot

    CS6FluidGrid.jpg

    When you put Divs outside the .gridContainer, this can create rounding problems in many browsers because the inner div widths are all set in fractional percentages rather than whole numbers.  Browsers don't fully understand how to render widths in fractions.

     

    In the following example, I have the same set-up as shown in my screenshot above except my footer div is intentionally located outside the gridContainer.  This allows my footer to be 100% page width.

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

     

    If you understand and work within the limitations of FluidGridLayouts, they can save you a lot of time.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 28, 2013 9:50 PM   in reply to RickChicago

    Hi Rick,

     

    I looked at the URL you gave(in IE) and couldn't see this problem anymore. has that been resolved ?

    This doesn't looks like a rounding problem to me as it will just shift a div marginally.

     

    What's really annoying - undo/Ctrl-Z does not undo "visual" changes.  I can edit text, resize a Div by dragging the right handle, do an Undo - and my text edit is changed - not the resize.

    Yes this is a bit of PIA, the reason being some actions like, resize will have a CSS only impact while others like swaping the elements etc have both HTML and CSS updates.

    and currently Undo will only work on the current file which is in focus (I.e HTML/source Code or CSS).

    Hence, in nut shell, if you did a resize and then you are trying to do undo such that you focus is not on CSS file, it wont work.

    to work around this , just switch to CSS code and then do undo and life is good again.

     
    |
    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