martins Posted May 20, 2010 Share Posted May 20, 2010 Hi. I've been looking for some nice css examples/skeletons of a 3 column website. I've found a few but they all mention some Opera/IE bugs. I don't now how dated the examples are so I'm not sure how relevant they are. Can anyone recommend (link/example, etc) a recommended skeleton for a 3-column website (with a 'header'). Thank you Quote Link to comment Share on other sites More sharing options...
xcoderx Posted May 21, 2010 Share Posted May 21, 2010 3 column <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb"> <head> <title>3 Column Layout Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> #wrapper { width:960px; margin:0 auto; padding:0.1em; background-color:red; } #header { padding:1em; background-color:blue; } #container { padding:1em; background-color:green; } #lefCol1 { float:left; width:165px; padding:1em; background-color:orange; } #midCol2 { float:left; width:500px; padding:1em; background-color:yellow; } #rigCol3 { float:left; width:165px; padding:1em; background-color:purple; } #footer { text-align:center; color:white; clear:both; padding:1em; background-color:black; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } </style> </head> <body> <div id="wrapper"> <div id="header">XCODERX</div> <div id="container" class="clearfix"> <div id="lefCol1">Column 1</div> <div id="midCol2">Column 2</div> <div id="rigCol3">Column 3</div> </div> <div id="footer">Footer</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
xcoderx Posted May 21, 2010 Share Posted May 21, 2010 this is one small and cute template i like http://www.minimalistic-design.net/dark.zip modify it according to ur needs if you like it then ;-) Quote Link to comment Share on other sites More sharing options...
martins Posted May 21, 2010 Author Share Posted May 21, 2010 thanks xcoderx. I'll play with them Quote Link to comment Share on other sites More sharing options...
haku Posted May 21, 2010 Share Posted May 21, 2010 I've found this site has good layouts that are cross-browser compatible. I often use it as my starting skeleton: http://www.dynamicdrive.com/style/layouts/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.