http://www.maxdesign.com.au/presentation/liquid/ is a start. Then type in css liquid layout @ google and go to next result. :repeat:
Ok , my attempt at liquid: <div id="wrapper" style="background-color: red; width: 72%; margin: 0 auto;"> <div id="branding"> </div> <div id="content" style="width: 78%; float: right;"> <div style="width: 73% ; float: left; border: 1px solid black;"> content </div> <div style="width: 25%; float: right; border: 1px solid black;"> dd </div> </div> <div id="nav" style="width: 20%; float: left; border: 1px solid black;"> <div class="padding"> content </div> </div> <div id="footer" style="clear: both;"> content </div> </div> HTML: Is this correct? I know the code is bad I was just testing quickly.
Its bad. Really aint going into it. Here's a sample code that's basic liquid. You can adjust the width for the page element and the other elements retain position. The example isn't that great but its a starting point. Tested only in FF3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> * { padding: 0 ; margin: 5px; border: black solid 1px; } html, body { border: none ; background: #efefef; margin: 0;} #page { margin: 0 auto; text-align: center ; width: 580px; background: #fff ;} #header { width: 95%; height: 100px; } #column { width: 55%; height: 300px ; float: left;} #sidebar { width: 38%; height: 300px ; float: left; } #footer { width: 95% ; height: 40px ; clear: both; } </style> </head> <body> <div id=page> <div id=header> Header </div> <div id="column"> Column </div> <div id="sidebar"> Sidebar </div> <div id="footer"> Footer </div> </div> </body> </html> HTML:
Thanks for the link, since im determined to nail liquid layouts im going to go through the site you linked me to and then doing some googling.