Skip to content

Instantly share code, notes, and snippets.

@gillibrand

gillibrand/two_equal_columns_in_css.html

Last active December 15, 2015 21:58
Show Gist options
  • Save gillibrand/5329135 to your computer and use it in GitHub Desktop.
Save gillibrand/5329135 to your computer and use it in GitHub Desktop.
Download ZIP
A way to get two equal sized columns in CSS that works in IE 8. You could just give up and use a <table>, but I'm not sure how to get the columns equal and get a fixed gutter (maybe make them 50%,0,50% but a fixed size div in the middle column to rubber band it open?).
Raw
two_equal_columns_in_css.html
<!DOCTYPE html>
<html>
<head>
<title> Two Equal Columns in CSS </title>
<style type="text/css">
.twoColumns {
position: relative;
}
.leftWrapper {
margin-right: 50%;
}
.left {
/* This margin and the one in the .right column add up to the total gutter width. */
/* They make the left and right slices of the gutter column. */
margin-right: 10px;
border: solid 1px #ddd;
}
.rightWrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
}
.right {
margin-left: 10px;
border: solid 1px #ddd;
height: 100%;
/* Need box sizing so that padding won't affect the height */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.column {
padding: 10px;
}
</style>
</head>
<body>
<p>The two columns below should have equal widths and heights, and have a fixed amount of space between them even if the window resizes.</p>
<div class="twoColumns">
<div class="leftWrapper">
<div class="left column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae purus vitae orci sodales tincidunt. Sed tincidunt consequat mi ac dapibus. Mauris pellentesque sem sit amet lorem elementum eleifend at vel orci. Aenean vel quam libero. Integer id sem nec lectus porttitor gravida. Sed blandit pharetra purus ut semper. Morbi elit odio, vulputate eu tempor eget, feugiat et turpis. Aliquam imperdiet orci at tellus convallis ac auctor orci aliquam. Curabitur lobortis elementum ullamcorper. Vivamus commodo volutpat iaculis. Nulla non orci fermentum tortor feugiat mattis vel eget felis.
</div>
</div>
<div class="rightWrapper">
<div class="right column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae purus vitae orci sodales tincidunt. Sed tincidunt consequat mi ac dapibus. Mauris pellentesque sem sit amet lorem elementum eleifend at vel orci. Aenean vel quam libero. Integer id sem nec lectus porttitor gravida. Sed blandit pharetra purus ut semper.
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment