i've done quite bit of research on css fullscreen layouts couldn't seem find i'm trying do. i'm looking fullscreen layout header, footer, multiple columns, , sidebar. here's ascii model , photoshop mockup. have ideas? i'm yet find fullscreen layout technique work.
+-----------------------+-------+ | | | +-------------+---------+ + | | | | | | | | | | | | | | | | | | | | | | | | +-------------+---------+-------+ | | +-------------------------------+ 
so tell me, how think accomplished? i'm open css 3 or html 5 options cross-browser compatibility bonus, not necessity (webkit target platform).
see below code in action here: http://jsfiddle.net/davinciwanab/nx4eq/
<style type="text/css"> * { margin: 0px; padding: 0px; } #header { float: left; width: 75%; height: 20px; background-color: #333; } #colright { float: right; width: 25%; height: 500px; background-color: #ccc; } #content { float: left; width: 50%; height: 480px; background-color: #eee; } #contentright { float: left; width: 25%; height: 480px; background-color: #aaa; } #footer { width: 100%; height: 20px; background-color: #777; } </style> </head> <body> <div id="header"></div> <div id="colright"></div> <div id="content"></div> <div id="contentright"></div> <div style="clear:both;"></div> <div id="footer"></div> </body> 
Comments
Post a Comment