fss and css layout question

Michael S Elledge elledge at msu.edu
Tue Feb 17 18:25:29 UTC 2009


Ahh...thanks for the clarification. I didn't think it would be 
overlooked, but better to be safe than sorry.

Mike

Jacob Farber wrote:
> In this case, I knew before hand the site is locked to 950px wide, so 
> that severely limits the usefulness of flexible width content, but 
> normally this would be ideal.
>
> On Tue, Feb 17, 2009 at 1:03 PM, Michael S Elledge <elledge at msu.edu 
> <mailto:elledge at msu.edu>> wrote:
>
>     You may also want to use percentages rather than pixels to keep
>     your layout liquid...
>
>     Mike
>
>     Jacob Farber wrote:
>
>         If your looking for 7 containers, then I would use the
>         technique you mentioned in #2, and overwrite the width to
>         135px instead of keeping the 150/100 px width.
>         Jacob
>
>         On Tue, Feb 17, 2009 at 10:39 AM, Laurel A. Williams
>         <laurel.williams at utoronto.ca
>         <mailto:laurel.williams at utoronto.ca>
>         <mailto:laurel.williams at utoronto.ca
>         <mailto:laurel.williams at utoronto.ca>>> wrote:
>
>            Hi Jacob,
>
>            Actually, the original examples (sent Friday) both did have
>         7 columns.
>
>            What I really wanted was 7 columns of approximately equal
>         widths
>            in a 950px wide container.
>
>            Since the flex columns only go up to 5 in the fss, I tried a
>            grouping of 4 columns and a grouping of 3 columns - as per your
>            suggestion. You can see an example of this at:
>            http://fluidproject.org/dev/index.php/partners in the Fluid
>            Academic partner institutions section.
>
>            I used the second style on:
>            http://fluidproject.org/dev/index.php/collaborate to
>         position the
>            images and text at the bottom of the page. I used 100 and 150
>            width containers alternately because 100 was way too small (700
>            total width ended up too narrow) and 150 was too big (total
>         would
>            have been 1050px - larger than 950px container).
>
>            So - would the more simple technique be to write my own fss
>            classes for 7 columns?
>
>            Laurel
>
>            Jacob Farber wrote:
>
>                The most critical mechanism in the fss files for laying
>                something out is just to use one of the many
>         "fl-container..."
>                or "fl-col..." class names, so that we can easily linearize
>                it. It's not as critical how you use them, just that
>         you do.
>                That being said.....
>
>                Occam's razor is king when it comes to laying out css +
>                markup. It is very important to map out the simplest
>         solution
>                to avoid big cross-browser headaches, bloat, css
>         errors, and
>                performance.
>
>                Truth is, the example above looks incomplete and the two
>                techniques do different things (#1 is 7 containers, #2 is 5
>                containers.). If your looking for the difference between
>                columns and containers, then the answer lies in what your
>                laying out and how it should behave. Columns are great for
>                flexible consistent width containers. Containers are more
>                general purpose. Many times, the two are interchangeable.
>
>                In this example, if you just want to lay things out side by
>                side of alternating widths, then you have to go with
>         technique
>                #2 since columns are even and this doesn't look like that's
>                what you want.
>                Sometimes it's good to have a strong idea of how the
>         grid for
>                a site should behave: This article on grids might help
>              
>          <http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/>
>
>                I hope that sheds some light!
>                Jacob
>
>
>
>
>                --        Jacob Farber
>                University of Toronto - ATRC
>                Tel: (416) 946-3002
>                www.fluidproject.org <http://www.fluidproject.org>
>         <http://www.fluidproject.org>
>                <http://www.fluidproject.org>
>
>
>            --    Laurel A. Williams
>
>            Adaptive Technology Resource Centre
>            University of Toronto
>
>
>
>
>         -- 
>         Jacob Farber
>         University of Toronto - ATRC
>         Tel: (416) 946-3002
>         www.fluidproject.org <http://www.fluidproject.org>
>         <http://www.fluidproject.org>
>         ------------------------------------------------------------------------
>
>
>
>         _______________________________________________________
>         fluid-work mailing list - fluid-work at fluidproject.org
>         <mailto:fluid-work at fluidproject.org>
>         To unsubscribe, change settings or access archives,
>         see http://fluidproject.org/mailman/listinfo/fluid-work
>          
>
>
>
>
> -- 
> Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002
> www.fluidproject.org <http://www.fluidproject.org>



More information about the fluid-work mailing list