Skip navigation
Currently Being Moderated

Need help with Fluid Grid Layout and variable column balance.

Nov 18, 2012 2:13 PM

Tags: #column #background_color #balance #fluid_grid_layout

I'm using the fluid grid layout.  I have multiple columns that are actually fluid grid layout columns done by Dreamweaver.  I'd like them to extend as high as each other (all to the maximum height of each other) within the same section.  An added catch is that in the desktop layout, I have three side by side under one that takes the whole width of the page.  On tablet size, it's 2x2 in a square grid.  On mobile, they're vertically stacked.  I'm trying to get it so that background colour and/or borders looks decent and is fully balanced, no matter which layout is hit with the fluid layout.  The columns reflow, no problem.  But the height of any background and/or border is variable. 

 

Any help on fixing this? 

 

Example at:  https://music2help.thoughtburst.net/ 

 

The example doesn't have borders or colours, as it looked silly unbalanced.  The music2help.css is the only one I'm modifying manually.

 

Love the fluid grid layout, but I need a way to make it behave decently with backgrounds/borders.  Any help would be hugely appreciated!

 

Thanks!

 

mark->

 
Replies
  • Currently Being Moderated
    Nov 18, 2012 3:07 PM   in reply to Fairlight2cx

    CSS doesn't provide for equal height columns without hacks and other workarounds.

     

    This JScript works well on normal layouts. But I've never tried it with DW's Fluid Grids.

    http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

     

    Let us know how it works.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 3:52 PM   in reply to Fairlight2cx

    Trust me when I tell you that Mat Taylor's Equal height layout approach is simply an illusion. The columns are not really equal height.  Owing to inherent limitations of Fluid Grid Layouts, his approach won't work for you.

    I'm starting to wonder about doing server-side includes of the div contents from a program which will read all three files and pad to the necessary amount of  <br/> lines to even things out. 

    Don't even go there.  <br> tags are not a layout device and should never be used that way. 

     

    Try the PVII script.  

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 3:59 PM   in reply to Fairlight2cx

    Adobe Fluid Grids is simply (no pun intended) not a good solution. It is

    extremely easy to learn and do multi-column layouts yourself with a

    fraction of the bloat and assurance of a long shelf life. If you are a

    CSS beginner I would recommend taking the time to learn. If you really

    need automation, then you might want to consider this:

     

    http://www.projectseven.com/products/tools/quick-columns/

     

    It simply (pun intended) works.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 4:02 PM   in reply to Fairlight2cx

    The Adobe fluid grid system is not very obliging or forgiving with other

    CSS or some scripts. We would test it, but I get a little nauseous

    whenever I look at Adobe's code

     

    If you are really, really, stuck on continuing with the fluid grid

    thing, send me a link to a live test page and I'll take it down and test

    it with our EQH script.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 4:03 PM   in reply to Fairlight2cx
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 4:06 PM   in reply to Ben Pleysier

    @Gramps,

    The OP is using DW's Fluid Grid Layouts.  Display:table won't work with them.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 4:09 PM   in reply to Ben Pleysier

    That's also a good approach if older browsers are not a major concern.

    One point I would add to your article is that CSS table display

    essentially causes DIVs to act as if they were real tables, which can

    cause lots of frustration when trying to make an adaptive/responsive

    site. What you want to add to your method is the use of the table-layout

    property and set it to a value of "fixed". This will cause the element

    to render based on its assigned width rather than as a table cell which

    will expand beyond its declared with dependent on the content inside.

    The classic "gotcha" here is setting an image to max-width 100% will

    never work with display table-cell unless the table layout is fixed.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 4:25 PM   in reply to Nancy O.

    @Nancy

    Oops! Thanks Nancy. Because I don't use DW's Fluid Grid Layouts, this completely slipped my mind.

     

    @Al

    Thanks. You know me by now, always trying to get a free-of-charge solution. I realise that these do not always work as is and that a paid-for solution can save a lot of time.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 4:41 PM   in reply to Ben Pleysier

    No problem.

     

    Free is not necessarily a bad thing and commercial is often a good

    thing. It depends on the situation. Of course, commercial is only good

    when the provider can guarantee satisfaction and provide the support to

    achieve it

     

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 5:49 PM   in reply to Fairlight2cx

    With all due respect, if you simply view the example pages below, you

    should be able to answer the questions yourself:

     

    http://www.projectseven.com/products/tools/quick-columns/examples/01.h tm

    http://www.projectseven.com/products/tools/quick-columns/examples/02.h tm

     

    Then, as you suggested, make your window narrow to emulate a mobile device.

     

    I'm afraid your link does not work. It presents a security alert.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 6:05 PM   in reply to Fairlight2cx

    When writing a media query to reflow a column to which you have assigned

    an EQH class, you simply set height to "auto" with an !important

    notation and declare a max-height with a value of "888678px" with an

    important notation. This tells the script to remove that element from

    the height array.

     

    Look at the media queries for our example page in this file:

    http://www.projectseven.com/products/tools/quick-columns/examples/demo .css

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 6:09 PM   in reply to Fairlight2cx

    By the way, I went online and see your "Edit" note, but the URL is the

    same and most I can get to with any browser if I ignore the security

    alert is a log in screen.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 7:16 PM   in reply to Fairlight2cx

    I made a quick example - with one major breakpoint (for phones). These

    can be added to, of course.

     

    http://www.projectseven.com/testing/adobe-forums/music-to-help/

     

    The bottom line is that you can use it to learn, buy a product (and get

    support as you will still need to customize some things), or continue to

    use Fluid Grids.

     

    Fluid Grid is poorly designed, based on free tutorials that are no

    longer current, use an incorrect viewport meta tag, and code that is way

    over the top for the job.

     

    Any way you decide to go, best of luck to you.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 7:31 PM   in reply to Fairlight2cx

    You're free and clear The EHC tutorial is free. You still are

    suffering from bloat with fluid grids, but sometimes is a price to pay

    for "free" - especially with Adobe add-ons.

     

    To clarify, I love Dreamweaver - but I've been around enough to be able

    to make darn good assessments of Adobe's "extras".

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 7:36 PM   in reply to Fairlight2cx

    To amplify my position, this recent post on our forum might be useful:

    http://www.pviiforums.com/topic.php?id=8776#post-13089

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 8:49 PM   in reply to Fairlight2cx

    With a menu you need to reflow it, just like you do any other element.

    There are different approaches depending on the menu type. This is an

    example I did for a customer (actually on that same forum thread I

    pointed you to):

     

    http://www.projectseven.com/testing/customers/debic-forum/

     

    Just look at the media queries to see how I did it. It would work with

    any list-based horizontal menu.

     

    Another approach that works, but only for a single-level menu, is to use

    a scrollable list. It would be very complex to do with jQuery, but it is

    a built-in feature of our tabbed panel widget:

     

    http://www.projectseven.com/products/tools/tpm2/demos/

     

    If you notice, some of the tabs simply change panels, while others are

    live links. The UI allows tabs to be set as links only - with no

    associated content panel so it can be used just as a menu.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    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