Advanced Search

equal height columns in pure css

/ Published in: CSS
Save to your folder(s)
equal height columns without any javascript

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .wrapper {
  2.   overflow:hidden;
  3.   background: blue;
  4.   height: 200px;
  5.   width: 200px;
  6.   float: left;
  7. }
  8. .column {
  9.   margin-bottom: -2000px;
  10.   padding-bottom: 2000px;
  11.   width: 50px;
  12.   display: inline;
  13.   float: left;
  14. }
  15. #column1 {
  16.   background: red;
  17. }
  18. #column2 {
  19.   background: green;
  20.   float: right;
  21. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.