How to create two containers within a row that responsively keep equal heights?


Tags: html,css,twitter-bootstrap,responsive-design

Problem :

Unfortuantely, the already answered questions on responsive background images and equal heights didn't solve my problem:

I am using Bootstrap 3 as a grid basis. I want to use an 8 column container and 4 column container within a full row. In the left container, I am using a background image which should be responsive. In the right container, I would like to use the background-color property instead of an image. I would like that both containers always keep the same height, when the screensize changes. At the moment I am using a fixed height of 450px, which logically creates a white gap between both containers on smaller screensizes. `

enter image description here

enter image description here

enter image description here

Any idea how to ensure that both containers always keep the same height without any white gaps?

HTML

<div class="row"></div>

    <div class="col-xs-12 col-md-8" id="header_left"></div>

    <div class="col-xs-12 col-md-4" id="header_right">

        <h1 class="text-center">Ipsum Lorum</h1>

        <p class="lead text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

        <p class="text-justify">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    </div>

</div>

CSS

#header_left {

background: url('.../img/header_img.jpg') 0 0 no-repeat;

-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
height: 450px;
}

#header_right {

background-color: green;
height: 450px;

}


Solution :

DEMO http://jsbin.com/aZuGORuP/1/

http://jsbin.com/aZuGORuP/1/edit?html,css,output

<div class="header-wrapper">

  <div id="header_left">
    <img src="http://placehold.it/767x400" class="img-fullwidth visible-sm visible-xs"/>
  </div>


<div id="header_right">
  <div class="content">
     <h1 class="text-center">Ipsum Lorum</h1>

    <p class="lead text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

    <p class="text-justify">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>
</div>




.img-fullwidth {width:100%;}

.header-wrapper {
    background-color:royalblue;
 }

 #header_right .content {
   color:#fff;
   padding:5%;
 }

  #header_right h1 {margin-top:0;}

  @media (min-width:992px) { 

 .header-wrapper {
    background-color:royalblue;
    display:table;
    height:450px;
 }

#header_left {
  width: 60%;
  display:table-cell;
  background: url('http://placehold.it/1200x800') 50% 50% no-repeat;
  background-size:cover;
}

#header_right {
  width: 40%;
  display:table-cell;

 }

}

    CSS Howto..

    How do I get two adjacent spans to display their text vertically?

    How to understand this CSS inheritance (or override, selection)

    Dropdown list showing vertically in Internet explorer

    How to style a png icon with CSS?

    How can I add pictures to my web via CSS

    Django-Bower + Foundation 5 + SASS, How to configure?

    How to fix width of column in two-column CSS lay out?

    How do I remove a CSS class from a jqGrid cell?

    How to hide elements in mobile devices? CSS

    background image of div element can't show in php file

    How to align div objects in rows

    How to configure a child div to display scrollbars only when a parent div percentage settings require it

    How to pass fontAwesome icon to CSS content via data attribute

    How to style