Created
April 20, 2017 13:24
-
-
Save Hexodus/b5b794c76db6b2a7f79e4d8658593525 to your computer and use it in GitHub Desktop.
Equal size columns with pure CSS. Uses bottom-padding-margin-trick where the overstanding elements will be cutted to proper size by overflow:hidden. From http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#container { | |
overflow: hidden; | |
width: 100%; | |
} | |
#left-col { | |
float: left; | |
width: 50%; | |
background-color: orange; | |
padding-bottom: 500em; | |
margin-bottom: -500em; | |
} | |
#right-col { | |
float: left; | |
width: 50%; | |
margin-right: -1px; /* Thank you IE */ | |
border-left: 1px solid black; | |
background-color: red; | |
padding-bottom: 500em; | |
margin-bottom: -500em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="container"> | |
<div id="left-col"> | |
<p>Test content</p> | |
<p>longer</p> | |
</div> | |
<div id="right-col"> | |
<p>Test content</p> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment