Three Columned DIV Layout

This is the free stretching DIV layout template - please don't remove the credit or redistribute!

Look! It's stretches. Try minimizing your window! :DD

Simply copy and paste the following code! If you are seeking for help with customizing the layout, you should check out our Layout Making Guide. If you still need help, feel free to contact me.

This layout has been tested in Mozilla Firefox 2 and Internet Explorer 6/7 and works fine. This layout with the exact coding it has now - is valid XHTML 1.0 Transitional, although adding invalid code or editing the code could result in an invalid markup.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Three Columned DIV Layout</title> <style type="text/css"> a, a:link, a:visited { text-decoration:none; color:#58585C; } a:hover, a:active, a:focus { color:#596CBF; } body { width:100%; margin:0px auto; font-family:verdana; font-size:10px; } #container { margin:0px auto; width:100%; height:auto; border:0px; } #container_right { margin:0px auto; float:left; width:85%; height:auto; } #banner { border:0px; height:150px; text-align:center; font-size:20px; width:100%; } #leftmenu { border:0px; width:15%; float:left; height:auto; } #content { width:85%; float:left; text-align:justify; height:auto; } #rightmenu { border:0px; width:15%; float:right; height:auto; text-align:right; } #disclaimer { border:0px; margin:0px auto; height:80px; width:100%; text-align:center; } .header { font-weight:bold; text-align:center; } img { border:0px; } input, textarea { font-size:10px; font-family:verdana; } </style> </head> <body> <div id="banner"> Banner </div> <div id="container"> <div id="leftmenu"> <div class="header">Header</div><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /><br /> <div class="header">Header</div><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /><br /> <div class="header">Header</div><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /> <a href="#">» Link Here</a><br /><br /> </div> <div id="container_right"> <div id="content"> <p> Content goes here! </p> </div> <div id="rightmenu"> <div class="header">Header</div><br /> <a href="#">Link Here «</a><br /> <a href="#">Link Here «</a><br /> <a href="#">Link Here «</a><br /> <a href="#">Link Here «</a><br /><br /> <div class="header">Header</div><br /> <a href="#">Link Here «</a><br /> <a href="#">Link Here «</a><br /> <a href="#">Link Here «</a><br /> <a href="#">Link Here «</a><br /><br /> <div class="header">Layout Credit</div><br /> <a href="http://www.pokenova.eeveeshq.com/"> <img src="http://www.pokenova.eeveeshq.com/images/88.16.1.gif" alt="PokeNova" /> </a> </div> </div> </div> <div id="disclaimer"> <div class="header">Disclaimer</div><br /> Put your disclaimer here! :3 </div> </body> </html>

If you believe yourself to be relatively new to HTML and CSS,I suggest you just edit the layout between the  and . However, feel free to edit the layout as much as you wish. But if you've used this layout to start off and then edited like crazy, you still are required to keep the credit - and I'll know if you've used this layout template!