Have you ever needed to layout columns on a page with a fixed height but different widths per column? This demo uses definition lists and fluid css to achieve that effect.
Features
1. The columns are presented in three different widths so that there are three possibilities on each line. i – One long column ii – One medium and two small columns iii – Three small columns
2. %’s are used to define the column widths so that the columns can resize based on browser screen size
3. The columns fill up the width until there is no more room at which point a new line is started
4. *Bonus1* I have added some css hover effects to the definition lists and the navigation buttons
5. *Bonus2* Click each navigation button to show only that section (with graceful degredation for those with javascript turned off)
