fss and css layout question

Laurel A. Williams laurel.williams at utoronto.ca
Fri Feb 13 18:52:19 UTC 2009


Hi Jacob,

I thought it might be useful to post this question so that others can 
benefit from the discussion.

There are a lot of different ways to put stuff  side by side with css 
and the fss. In the fluidproject.org site "stuff" is clickable 
images/logos with a caption below. I'm playing with the different ways 
to do this side by side placement. I've put two techniques below. I'm 
sure there are more. 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?

* I'm working in a 950 wide fixed div - <div class="fl-container-950">

Laurel

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>
<div class="fl-container-150 fl-force-left"> </div>
<div class="fl-container-100 fl-force-left"> </div>


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




More information about the fluid-work mailing list