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 On Tue, Feb 17, 2009 at 9:08 AM, Anastasia Cheetham <[email protected]> wrote: > > On 13-Feb-09, at 1:52 PM, Laurel A. Williams wrote: > >> I thought it might be useful to post this question so that others can >> benefit from the discussion. > > Just a "me too" for this question - I'd love to know the answer, as well... > >> There are a lot of different ways to put stuff side by side with css and >> the fss. ..I was wondering if you have time to comment on the techniques >> below - advantages/disadvantages? Other techniques that might work better >> using the fss or without the fss? >> >> Technique #1: >> <div class="fl-container-flex"> >> <div class="fl-col fl-container-500 fl-col-flex4"> >> <div class="fl-col"> </div> >> <div class="fl-col"> </div> >> <div class="fl-col"> </div> >> <div class="fl-col"> </div> >> </div> >> <div class="fl-col fl-container-450 fl-col-flex3"> >> <div class="fl-col"> </div> >> <div class="fl-col"> </div> >> <div class="fl-col"> </div> >> </div> >> </div> >> >> Technique #2: >> <div class="fl-container-100 fl-force-left"> </div> >> <div class="fl-container-150 fl-force-left"> </div> >> <div class="fl-container-100 fl-force-left"> </div> >> <div class="fl-container-150 fl-force-left"> </div> >> <div class="fl-container-100 fl-force-left"> </div> > > -- > Anastasia Cheetham [email protected] > Software Designer, Fluid Project http://fluidproject.org > Adaptive Technology Resource Centre / University of Toronto > > _______________________________________________________ > fluid-work mailing list - [email protected] > 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
_______________________________________________________ fluid-work mailing list - [email protected] To unsubscribe, change settings or access archives, see http://fluidproject.org/mailman/listinfo/fluid-work
