liquid layouts with css
DESCRIPTION
A very old presentation from 2005 on Liquid layouts using CSS - some of the common issues and solutions.TRANSCRIPT
CSSthe joy, the pain, the tears
liquid layouts using
harddesigning liquid layouts is
work
things move
things break
things stretch
things squash
gaps appear
elements poke out
layouts collapse
colors don’t extend
columns disappear
funny indents
now is the perfect time toIt is my professional opinion that
panic
stop whinging and
solutionsgive us some
Content can bemade to slide
around, over orunder other
elements
Navigation can be designed soline breaks are not an issue
Gutters can be set topercentages to avoidlong lines of text
Min-width canbe used tostop columncollapse
Pages can belaid out to
allow forcollapse
Funny indents such as the threepixel text jog can be solved
The IE Three pixel text-jog
CSS can beused to scaleform elementsand images
extras img{width: 100%;max-width: 250px;}
input#email{width: 100%;max-width: 200px;}
Users can be given layout options
CSS/Javascript can be used tochange layout
Backgroundimages can be
used to addcolumn color
#container{background: #fff url(images/back01.gif) repeat-y 50% 0;}
#container2{background: url(images/back02.gif)repeat-y 80% 0;}
mutilateGo forth and