Advanced Search

div raamwerk sticky footer center 3 kolommen

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*CSS*/
  2. /  RESET
  3. ******************************/
  4. html, body, div, span, applet, object, iframe, table, caption, tbody,
  5. tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp,
  6. small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p,
  7. blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd,
  8. ol, ul, li, fieldset, form, label, legend{
  9. 	vertical-align: baseline;
  10. 	font-family: inherit;
  11. 	font-weight: inherit;
  12. 	font-style: inherit;
  13. 	font-size: 100%;
  14. 	outline: 0;
  15. 	padding: 0;
  16. 	margin: 0;
  17. 	border: 0;}
  18.  
  19. body{line-height: 1;}
  20. ol, ul{list-style: none;}
  21. table{border-collapse: separate; border-spacing: 0;}
  22. caption, th, td{font-weight: normal; text-align: left;}
  23. a img, :link img, :visited img {border: none;}
  24. div#printheader{display: none;}
  25.  
  26. div.clear{
  27. 	clear: both;
  28. 	width: 100%;
  29. 	height: 1px;
  30. 	overflow: hidden;}
  31.  
  32.  
  33. /* sticky footer */
  34. * {margin:0;padding:0;} 
  35.  
  36. /* must declare 0 margins on everything, also for main layout components use padding, not 
  37. vertical margins (top and bottom) to add spacing, else those margins get added to total height 
  38. and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
  39.  
  40. html, body {
  41. height:100%; /* gives layout 100% height */
  42. overflow:inherit; /* triggers 100% height in Opera 9.5 */
  43. }
  44. #wrapper {
  45. min-height:100%; /* gives layout 100% height */
  46. }
  47. * html #wrapper { 
  48. height:100%; /* IE6 treats height as min-height */
  49. }
  50.  
  51. div#paddingWrapper{
  52.  
  53. float:left;
  54. display:inline;
  55. background-color:green;
  56. padding:10px 5px 0px 5px;
  57. *padding:10px 5px 40px 5px;}/* bottom padding clears the #footer in IE */
  58.  
  59. #footer {
  60. position:relative;
  61. clear:both;
  62. height:40px;
  63. margin:-40px auto 0; /* -80px sucks it back into the #wrapper */
  64. }
  65.  
  66. #wrapper {
  67. width:1000px; /* centered div must be given a width */
  68. margin:0 auto; /* centers #wrapper */
  69. }
  70. #footer {
  71. width:1000px; /* centered div must be given a width */
  72. margin:-40px auto 0; /* auto left/right centers it */
  73. }
  74.  
  75.  
  76. /* CLEAR FIX*/
  77. .clearfix:after {content: ".";
  78. 	display: block;
  79. 	height: 0;
  80. 	clear: both;
  81. 	visibility: hidden;}
  82. .clearfix {display: inline-block;}
  83. /* Hides from IE-mac \*/
  84. * html .clearfix { height: 1%;}
  85. .clearfix {display: block;}
  86. /* End hide from IE-mac */
  87.  
  88.  
  89. /* LAYOUT
  90. ******************************/
  91.  
  92.  
  93. div#header{
  94. 	z-index:2;
  95. 	background-color:red;
  96. 	width:990px;
  97. 	height:315px;}
  98.  
  99. div#logo{
  100. 	position:relative;
  101. 	float:left;
  102. 	z-index:3;
  103. 	background-color:yellow;
  104. 	top:0px;
  105. 	left:0;
  106. 	width:245px;
  107. 	height:135px;}
  108.  
  109. div#zoeken{
  110.  
  111. 	float:right;
  112. 	top:-67px;
  113. 	width:240px;
  114. 	height:30px;
  115. 	background-color:white;}
  116.  
  117. div#topmenu{
  118. 	positioin:relative;
  119. 	z-index:99;
  120. 	margin-top:20px;
  121. 	background-color:blue;
  122. 	width:990px;
  123. 	height:30px;}
  124.  
  125. div#leftcol{
  126. 	display: inline;
  127. 	z-index:4;
  128. 	width: 258px;
  129. 	float: left;
  130. 	background-color:black;}	
  131.  
  132. div#middlecol{
  133. 	display: inline;
  134. 	float:left;
  135. 	width: 504px;
  136. 	background-color:#CCFF00;}
  137.  
  138. div#rightcol{
  139. 	display: inline;
  140. 	width: 228px;
  141. 	float: left;
  142. 	background-color:#FFCC33;}	
  143.  
  144.  
  145.  
  146. /* TEKST
  147. ******************************/
  148. body{
  149. 	font: normal 10px/17px Verdana, Arial, sans-serif;
  150. 	color: #000;}
  151.  
  152. div#footer{
  153. 	font: normal 10px/17px Verdana, Arial, sans-serif;
  154. 	color: #666;}
  155.  
  156.  
  157. /* paragraaf */
  158. p{padding: 0 0 10px}
  159. div#homebox_1 p, div#homebox_2 p{padding: 0 10px 10px;}
  160. strong{color: #000; font-weight: bold;}
  161.  
  162.  
  163.  
  164.  
  165.  
  166. /* titels */
  167. h1, h2, h3{
  168. 	letter-spacing: -1px;
  169. 	margin: 0 0 10px;
  170. 	padding: 0;
  171. 	clear: both;}
  172.  
  173. h1{	font: normal 32px/32px Verdana, Arial, sans-serif;
  174. 	color: #fff;
  175. 	text-align: right;}
  176.  
  177. h2{	font: bold 20px/24px Verdana, Arial, sans-serif;
  178. 	color: #ffffff;}
  179.  
  180. h3{	font: normal 18px/22px Verdana, Arial, sans-serif;
  181. 	color: #ffffff;}
  182.  
  183. /* opsommingen */
  184.  
  185. /* links */
  186.  
  187.  
  188.  
  189. /* AFBEELDINGEN */
  190.  
  191.  
  192.  
  193. }
  194.  
  195.  
  196. /* MENU'S
  197. ******************************/
  198.  
  199. /* ELEMENTEN
  200. ******************************/
  201.  
  202.  
  203. /* tabel */
  204. table{}
  205. caption{}
  206. thead{}
  207. tfoot{}
  208. tbody{}
  209. th{}
  210. tr{}
  211. td{}
  212.  
  213. /* toggle */
  214.  
  215.  
  216.  
  217. /*sitemap*/
  218.  
  219.  
  220. /*HTML************************************/
  221.  
  222. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  223.  
  224. <html>
  225. <head>
  226.  
  227.  
  228. <title> test</title>
  229.  
  230. <link rel="stylesheet" type="text/css" href="stylesheet.css">
  231.  
  232. </head>
  233. <body>
  234.  
  235.  
  236. <div id="wrapper" style="background-color:pink;">
  237.  
  238.  <div id="paddingWrapper">
  239.  
  240.   <div id="header">
  241.    <div id="logo"></div><!--logo-->
  242.   </div><!--header-->
  243.  
  244.  
  245.  
  246.   <div id="topmenu">df</div><!--topmenu-->
  247.  
  248.    <div id="leftcol">
  249.    sdf<br />	sdf<br />
  250.    </div><!-- leftcol-->
  251.       <div id="middlecol">
  252.       sdf<br />	sdf<br />	
  253.       </div><!--middlecol-->
  254.  
  255.    <div id="rightcol">
  256.  
  257.    </div><!--rightcol--> 
  258.  
  259.  
  260.  
  261.  
  262.  
  263. </div><!--paddingWrapper-->
  264.  
  265. </div><!-- wrapper -->
  266.  
  267. <div id="footer" style="background-color:yellow;"></div><!-- #footer sits outside the #wrapper -->
  268.  
  269.  
  270.  
  271.  
  272.  
  273.  
  274.  
  275. </body>
  276. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.