fss and css layout question

[Jacob Farber]

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> 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>> 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>
>>
>>
>>    --    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>
>> ------------------------------------------------------------------------
>>
>> _______________________________________________________
>> fluid-work mailing list - 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20090217/8d43e7e6/attachment.html>