Advanced Search

Equal Height Columns

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // HTML
  2.  
  3. <div class="equal">
  4. 	<div class="row">
  5. 		<div class="one">
  6.  
  7. 			<h2>This is a box</h2>
  8. 			<p>This box has less content than the one next to it, but both boxes will still have equal height. No background-image trickery.</p>
  9. 		</div>
  10. 		<div class="two">
  11.         	<h2>This is another box</h2>
  12. 			<p>This box has more content than the others. If all boxes were table cells, the cell with the most content would decide the height of all cells. It works like that here too, but this is not a table.</p>
  13. 			<p>Instead, display:table, display:table-row and display:table-cell are used to make divs behave like table cells. Excellent. Too bad it doesn&rsquo;t work in you-know-which-browser. It does, however, work in modern browsers like Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.</p>
  14.  
  15. 			<p>Read the related blog entry for more info: <a href="/archive/200405/equal_height_boxes_with_css/">Equal height boxes with CSS</a>.</p>
  16. 		</div>
  17. 		<div class="three">
  18. 			<p>This box has even less content. Anything in it is vertically centered.</p>
  19. 		</div>
  20. 	</div>
  21. </div>
  22.  
  23.  
  24. // CSS
  25.  
  26. /* Layout rules */
  27. 	.equal {
  28. 		display:table;
  29. 		border-collapse:separate;
  30. 	}
  31. 	.row {
  32. 		display:table-row;
  33. 	}
  34. 	.row div {
  35. 		display:table-cell;
  36. 	}
  37.  
  38. 	/* Styling rules to make the example look nicer */
  39. 	html,body {
  40. 		margin:0;
  41. 		padding:0;
  42. 		color:#000;
  43. 		background:#fff;
  44. 	}
  45. 	body {
  46. 		font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  47. 	}
  48. 	.equal {
  49. 		margin:10px auto;
  50. 		border-spacing:10px;
  51. 		background:#898B60;
  52. 		width:80%;
  53. 	}
  54. 	.row div {
  55. 		background:#fff;
  56. 	}
  57. 	.row div.one {
  58. 		width:40%;
  59. 	}
  60. 	.row div.two {
  61. 		width:40%;
  62. 	}
  63. 	.row div.three {
  64. 		vertical-align:middle;
  65. 	}
  66. 	.row div h2 {
  67. 		margin:0 0 0.5em 0;
  68. 		padding:0.5em 10px;
  69. 		font-size:1.2em;
  70. 		color:#fff;
  71. 		background:#595B30;
  72. 	}
  73. 	.row div p {
  74. 		font-size:0.94em;
  75. 		margin:0.5em 0;
  76. 		padding:0 10px;
  77. 	}
  78. 	#labfooter {
  79. 		text-align:center;
  80. 	}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.