Liquid layouts with CSS

4,051 views

Published on

A very old presentation from 2005 on Liquid layouts using CSS - some of the common issues and solutions.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,051
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
186
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Liquid layouts with CSS

  1. 1. liquid layouts using CSS the joy, the pain, the tears
  2. 2. designing liquid layouts is hard work
  3. 3. things move
  4. 4. things break
  5. 5. things stretch
  6. 6. things squash
  7. 7. gaps appear
  8. 8. elements poke out
  9. 9. layouts collapse
  10. 10. colors don’t extend
  11. 11. columns disappear
  12. 12. funny indents
  13. 13. It is my professional opinion that now is the perfect time to panic
  14. 14. stop whinging and give us some solutions
  15. 15. Content can be made to slide around, over or under other elements
  16. 16. Navigation can be designed so line breaks are not an issue
  17. 17. Gutters can be set to percentages to avoid long lines of text
  18. 18. Min-width can be used to stop column collapse
  19. 19. Pages can be laid out to allow for collapse
  20. 20. Funny indents such as the three pixel text jog can be solved The IE Three pixel text-jog
  21. 21. extras img { CSS can be width: 100%; max-width: 250px; used to scale } form elements input#email { and images width: 100%; max-width: 200px; }
  22. 22. Users can be given layout options
  23. 23. CSS/Javascript can be used to change layout
  24. 24. Background #container { images can be background: #fff url(images/back01.gif) used to add repeat-y 50% 0; column color } #container2 { background: url(images/back02.gif) repeat-y 80% 0; }
  25. 25. Go forth and mutilate

×