How to make two sides equal height? One big div and some small divs

Issue

I have news section and on the left side of it there is one big div (main-article) on the right side some (4) small divs (sub articles). I need to make them equal dynamically (both sides should be visually equal):

enter image description here

I tried to make by jQuery and I partially achieved it, but with a really big bug. If the left side is too small, the right side articles will be too small and their text will overflow the containers:

Here is the HTML:

<div class="row">
    <div class="col-md-6">
        <article class="article-main_pg main-article article-main_pg--1">
            <!-- image and text -->
        </article>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="row">

        <!-- this four times -->

            <div class="col-lg-6">
               <article class="article-main_pg main-article article-main_pg--1">
                <!-- image and text -->
                </article>
            </div>

         <!-- this four times end -->

        </div>
    </div>
</div>

My jQuery attempts

// news section fix height

// get left news article height (without margin)
var leftArtHeight = $('.s10-news .main-article').outerHeight(false);

// reduce it by half and decrease by right side subarticles margin then add half of the margin (as we need to remember about 2 bottom subarticles margin)

// 25 is the margin (i know it, but ofcourse it can be set from DOM)

var heightForRightSubArt = (leftArtHeight / 2) - 25 + 13;

//finaly we set calculated height to the right subarticles and both sides are equal
$('.s10-news .sub-article').css("height" , heightForRightSubArt);

The result is ok BUT it’s not responsive and it’s a bug if the left side is too small.

Solution

try this, this may help to you.if this is not the case tell me.copy,paste , run and check is this what you want.

<!DOCTYPE html>
    <html>
    <head>
    <title>hover</title>
   
 <style type="text/css">
     body{
        margin:0;
        padding:0;
        width: 100%;
        height: 100%;
     }

     div.main{
      width: 98%;
      margin: 1%;
      margin-top: 5%;
      border:1px solid red;
      height: 600px;
     }
    
    div.main div{
      float: left;
    }
    div.mainone{
      width: 45%;
      height: 90%;
      border:1px solid orange;
      margin: 2.5%;
    }

    div.maintwo{
      height: 90%;
      width: 45%;
      border:1px solid green;
      margin: 2%;
      margin-top: 2.5%;
    }

    div.maintwo div{
      width: 40%;
      height: 40%;
      border: 1px solid blue;
      margin: 4.5%;
    }

    div.description{
      width: 100%;
      height: 59%;
      background-color: pink;
    }

 </style>

 </head>
 <body>
  <div class="main">
   <div class="mainone">
     <img src="" style="width:100%;height:40%;box-shadow:1px 2px 1px black;">
     <div class="description"></div>
   </div>
   <div class="maintwo">
    <div class="subone"></div>
    <div class="subtwo"></div>
    <div class="subthree"></div>
    <div class="subfour"></div>
   </div>
  </div>

 </body>

</html>

Answered By – caldera.sac

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.