Advertisement
Guest User

Untitled

a guest
Mar 4th, 2011
130
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.29 KB | None | 0 0
  1. <!--Force IE6 into quirks mode with this comment tag-->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <title>Dynamic Drive: CSS Left and Right Frames Layout</title>
  8. <style type="text/css">
  9.  
  10. body{
  11. margin: 0;
  12. padding: 0;
  13. border: 0;
  14. overflow: hidden;
  15. height: 100%;
  16. max-height: 100%;
  17. }
  18.  
  19. #framecontentLeft, #framecontentRight{
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. width: 200px; /*Width of left frame div*/
  24. height: 100%;
  25. overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
  26. background-color: navy;
  27. color: white;
  28. }
  29.  
  30. #framecontentRight{
  31. left: auto;
  32. right: 0;
  33. width: 150px; /*Width of right frame div*/
  34. overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
  35. background-color: navy;
  36. color: white;
  37. }
  38.  
  39. #maincontent{
  40. position: fixed;
  41. top: 0;
  42. left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
  43. right: 150px; /*Set right value to WidthOfRightFrameDiv*/
  44. bottom: 0;
  45. overflow: auto;
  46. background: #fff;
  47. }
  48.  
  49. .innertube{
  50. margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
  51. }
  52.  
  53. * html body{ /*IE6 hack*/
  54. padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
  55. }
  56.  
  57. * html #maincontent{ /*IE6 hack*/
  58. height: 100%;
  59. width: 100%;
  60. }
  61.  
  62. </style>
  63.  
  64. <script type="text/javascript">
  65. /*** Temporary text filler function. Remove when deploying template. ***/
  66. var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
  67. function filltext(words){
  68. for (var i=0; i<words; i++)
  69. document.write(gibberish[Math.floor(Math.random()*3)]+" ")
  70. }
  71. </script>
  72.  
  73. </head>
  74.  
  75. <body>
  76.  
  77. <div id="framecontentLeft">
  78. <div class="innertube">
  79.  
  80. <h1>CSS Left and Right Frames Layout</h1>
  81. <h3>Sample text here</h3>
  82.  
  83. </div>
  84. </div>
  85.  
  86. <div id="framecontentRight">
  87. <div class="innertube">
  88.  
  89. <h3>Sample text here</h3>
  90.  
  91. </div>
  92. </div>
  93.  
  94.  
  95. <div id="maincontent">
  96. <div class="innertube">
  97.  
  98. <h1>Dynamic Drive CSS Library</h1>
  99. <p><script type="text/javascript">filltext(255)</script></p>
  100. <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
  101.  
  102. </div>
  103. </div>
  104.  
  105.  
  106. </body>
  107. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement