4

I am trying to make a 2 column layout. The left column should automatically adjust its height to the right column. So both columns have the same height.

My source code looks like this:

.row {clear: both; max-width: 1240px; margin: 0 auto;}
.col-6 {width: 50%; float: left; position: relative;}
.space-default {padding: 200px 0;}
<div class="row">
  <div class="col-6">
    <div class="space-default">
      left column
    </div>
  </div>
  <div class="col-6">
    <div class="space-default">
      right column
    </div>
  </div>
</div>

Now as I said, I would like to adjust the height of the left column so it is always the same height as the right one. With the top and bottom padding.

I am struggling with this and can't find a proper way to solve my problem.

msrd0
  • 7,816
  • 9
  • 47
  • 82
user2720132
  • 109
  • 2
  • 7
  • Does the height of the column change after the page has been loaded? You could use jQuery / JavaScript to fix it. – Thijs Riezebeek Feb 06 '15 at 12:05
  • possible duplicate of: http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – ketan Feb 06 '15 at 12:06

4 Answers4

0
<div class="row">
  <div class="col-6">
<div class="space-default">
  left column
</div>
<div class="space-default">
  right column
  </div>
 </div>
 </div>

try this

GasKa
  • 54
  • 6
  • While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – msrd0 Feb 06 '15 at 13:51
0

use table formatting instead of float:left

.row {clear: both; max-width: 1240px; margin: 0 auto; display:table}
.col-6 {width: 50%; display:table-cell}
.space-default {padding: 200px 0;}
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
0

You can give the same min-height or max-height to both of your divs. It depends what you want to achieve.

DrNio
  • 1,936
  • 1
  • 19
  • 25
-1

You can do this pretty easily with the newer CSS Flexbox property. Here is a great tutorial and what you're looking for is near the bottom:

http://www.paulund.co.uk/css-flexbox

Jeff
  • 1
  • 1