CODEWITHSUNDEEP
htmlcssheight
afrila gunadi
afrila gunadi

Reputation: 124

Create equal height two column with css

i want to create equal height two column, two column right will following height column left.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.left-side {
   background-color: green;
   height: auto;
}

.right-side-up {
    background-color: red;
    height:100px; //ignore this value, if u have other way
}

.right-side-down{
   background: blue;
   height: 80px; //ignore this value, if u have other way
}

The same code on JsFiddle

Upvotes: 0

Views: 290

Answers (4)

Sleek Geek
Sleek Geek

Reputation: 4686

Here what to do:

  1. Remove row from <div class="row right-side"> or change the name to avoid conflict

  2. Then add the 3 blocks below to your css

/* The added blocks start here */

.right-side-up, .right-side-down {
    width: 100%;
}
.row {
    display: inline-flex;
    width: 100%; /* Adjust as needed */
}

.left-side, .right-side {
  display: inline;
    width: 50%;
}

/* The added Block Stops here */

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .row {
  display: inline-flex;
  width: 100%
}
.left-side,
.right-side {
  display: inline;
  width: 50%;
}
.left-side {
  background-color: green;
}
.right-side-up,
.right-side-down {
  width: 100%;
}
.right-side {
  background-color: orange;
}
.right-side-up {
  background-color: red;
  height: 100px;
}
.right-side-down {
  background: blue;
  height: 80px;
}
<div class="row">


  <div class="left-side">
    <p>sdfsdf</p>
    <p>sdfsdf</p>
    <p>sdfsdf</p>
    <p>sdfsdf</p>
  </div>


  <div class="right-side">
    <div class="col-xs-1 right-side-up">
      asdfdf
    </div>

    <div class="col-xs-1 right-side-down">
      asdfdf
    </div>
  </div>
  <!-- close row -->


</div>

Upvotes: 1

Đặng Văn Thanh
Đặng Văn Thanh

Reputation: 558

You also use some JavaScript to define equal height of left side and right side.

var leftSide = document.querySelector('.left-side');
var rightSide = document.querySelector('.right-side');
var hLeftSide = leftSide.clientHeight;
var hRightSide = rightSide.clientHeight;

var maxH = Math.max(hLeftSide, hRightSide);

leftSide.style.height = maxH + 'px';
rightSide.style.height = maxH + 'px';
.left-side {
    background-color: green;
    height: auto;
}

.right-side-up {
    background-color: red;
    height:100px;
}

.right-side-down{
    background: blue;
    height: 80px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
        
       
              <div class="col-xs-9 left-side">
                <p>sdfsdf</p>
                <p>sdfsdf</p>
                <p>sdfsdf</p>
                <p>sdfsdf</p>
              </div>
            <div class="row right-side">
               <div class="col-xs-3 right-side-up">
                asdfdf
               </div>
            
               <div class="col-xs-3 right-side-down">
                asdfdf
               </div>
            </div> <!-- close row -->
          
        
</div>

Or you can use Flexbox too

.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.left-side,
.right-side {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.left-side {
    background-color: green;
    height: auto;
}

.right-side-up {
    background-color: red;
    height:100px;
}

.right-side-down{
    background: blue;
    height: 80px;
}

.row.no-padding,
.col-xs-3.no-padding,
.col-xs-9.no-padding {
  padding-left: 0;
  padding-right: 0;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="row no-padding flexbox">
        
       
              <div class="col-xs-9 no-padding left-side">
                <p>sdfsdf</p>
                <p>sdfsdf</p>
                <p>sdfsdf</p>
                <p>sdfsdf</p>
              </div>
            <div class="col-xs-3 no-padding right-side">
               <div class="col-xs-12 right-side-up">
                asdfdf
               </div>
            
               <div class="col-xs-12 right-side-down">
                asdfdf
               </div>
            </div> <!-- close row -->
          
        
</div>

Upvotes: 1

Anant Dabhi
Anant Dabhi

Reputation: 11144

You can achieve that using jquery

you need to use jquery and 

 <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
     $(document).ready(function () { 
    var maxheight = Math.max($(".left-side").height(), $(".right-side").height());

    $(".right-side,.left-side").css("height", maxheight);
    });
    </script>

Here is jsbin sample : http://jsbin.com/vobekavega/1/

Upvotes: 1

user4642233
user4642233

Reputation:

If I understood the question correctly, just add a margin to the .right-side-up, like so:

.right-side-up {
    margin-top:20px; // Or margin-bottom:20px;
    background-color: red;
    height:100px;
}

Here is a fiddle.

Upvotes: 0

Related Questions