fss and css layout question

Laurel A. Williams laurel.williams at utoronto.ca
Tue Feb 17 15:39:09 UTC 2009


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>
>

-- 
Laurel A. Williams
Adaptive Technology Resource Centre
University of Toronto