How to give the space between two div when parent div value is table or flex?

Question

I have to display the div with equal height. So I added display: flex in the parent class and it's working. Now the issue is, How to give the space between two div when parent div is flex?

.full_100{
        width: 100%;
        display: flex;
      }
    .left_50, .right_50{
        width: 50%;
    }
    .bg_light_white{
        background-color: #f9f9f9;
    }
    .margin_20{
        margin: 20px;
    }
    .index_content{
        padding: 15px;
        box-sizing: border-box;
    }

  <div class="full_100"> 
    <div class="left_50 bg_light_white">
      <div class=" margin_20">
      <div class="index_content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
    </div>
    </div><!--left_50-->


    <div class="right_50  bg_light_white">
      <div class="margin_20">
      <div class="index_content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
    </div><!--right_50-->
  </div><!--full_100-->

I also tried with display: table and display:table-cell to display the div with equal height. which is working. Now the issue is, How to give the space between two div when parent div display: table?

    .full_100{
        width: 100%;
        display: table;
      }
    .left_50, .right_50{
        width: 50%;
        display: table-cell;
    }
    .bg_light_white{
        background-color: #f9f9f9;
    }
    .margin_20{
        margin: 20px;
    }
    .index_content{
        padding: 15px;
        box-sizing: border-box;
    }

  <div class="full_100"> 
    <div class="left_50 bg_light_white">
      <div class=" margin_20">
      <div class="index_content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
    </div>
    </div><!--left_50-->


    <div class="right_50  bg_light_white">
      <div class="margin_20">
      <div class="index_content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
    </div><!--right_50-->
  </div><!--full_100-->

Then I tried 3rd logic and remove the class bg_light_white from left_50 and right_50 class and added below of the div but this time I got a space between two div but I am not getting the equal height.

    .full_100{
        width: 100%;
        display: table;
      }
    .left_50, .right_50{
        width: 50%;
        display: table-cell;
    }
    .bg_light_white{
        background-color: #f9f9f9;
    }
    .margin_20{
        margin: 20px;
    }
    .index_content{
        padding: 15px;
        box-sizing: border-box;
    }

  <div class="full_100"> 
    <div class="left_50">
      <div class=" margin_20 bg_light_white">
      <div class="index_content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
    </div>
    </div><!--left_50-->


    <div class="right_50">
      <div class="margin_20 bg_light_white">
      <div class="index_content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
    </div><!--right_50-->
  </div><!--full_100-->

I don't want to change the width. Is it posible?

@TemaniAfif, hahaha, I know using margin I can give the space but that is not working. I don't know where I am wrong. Can you check my code and assist me where I have to add it. — , Jan 12 '18 at 08:43

Kit Loong · Accepted Answer · 2018-01-12T10:09:10.220

0

Just put margin to your flex example

.bg_light_white {
    background-color: #f9f9f9;
    margin: 10px;
}

For table example you can use border-spacing

.full_100 {
    width: 100%;
    display: table;
    border-spacing: 10px;
}

Useful explanation about table-cell spacing. Why is a div with "display: table-cell;" not affected by margin?

Personally I prefer flex approach

edited Jan 12 '18 at 10:09

answered Jan 12 '18 at 09:32

Kit Loong

358
1
12

Thanks, It's working for flex. Do have any idea about the reset of two? – Jan 12 '18 at 09:59
Thanks Again Mr.Kit. Both are working perfectly. Upvote from my side. – Jan 12 '18 at 10:12

How to give the space between two div when parent div value is table or flex?

1 Answers1