advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

indianocean on 07/19/07


Tagged

css float html


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

irm


3 Column Layout with floats

Published in: HTML 

Plain TextExpand 
  1. <!-- http://www.bluerobot.com/web/css/fouc.asp/ -->
  2. <!-- http://leftjustified.net/journal/2004/10/07/css-negotiation/ -->
  3.  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  5. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  8. <head>
  9. <title>XHTML 1.0 conform layout</title>
  10. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  11. <!-- using a link prevents FOUC -->
  12.  
  13. <style type="text/css" media="screen">
  14. #leftnav{
  15. float: left;
  16. width: 250px;
  17. border: 1px solid green;
  18. }
  19. #rightnav{
  20. float: right;
  21. width: 250px;
  22. border: 1px solid blue;
  23. }
  24. #content{
  25. margin-left: 250px;
  26. margin-right: 250px;
  27. border: 1px solid red;
  28. }
  29. </style>
  30. </head>
  31.  
  32. <body>
  33. <div id="leftnav">
  34. spalte1
  35. </div>
  36. <div id="rightnav">
  37. spalte2
  38. </div>
  39. <div id="content">
  40. spalte3
  41. </div>
  42.  
  43. </body>
  44. </html>

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: Winkyboy on January 14, 2008

Seems flaky. The columns overlap and don't extend the entire table when content in one column is greater than the others. On the bright side, it is pretty short and easy to read the code.

You need to login to post a comment.