How to set 50% height on a child div of an auto height div?

How to set 50% height on a child div of an auto height div?

I want to set up a block made of 3 cells:

The parent div is set to 100% width, the two columns are 50% width. The content needs to expand/shrink with the page as it will be a responsive page. Since I don't know the height of the parent div, I can only set the rows on the right a percentage height, but 50% is not valid with an auto height parent. How Can I achive to have the upper and lover half 50% of the height of the parent div? The image's aspect ratio will always be 1:1

  
Upper half
Lower half
  
  

CSS

body {      margin 0;      padding 0;  }  .container {      width: 100%;      display: inline-block;      padding: 0;      margin: 0;  }  img {      width: 100%;      padding 0;      margin 0;      border: none;  }  .column {      width: 50%;      padding: 0;      margin: 0;      display: inline-block;      vertical-align: top;  }  .row {      width: 100%;      height: 50%;      padding: 0;      margin: 0;      vertical-align: top;      display: inline-block;  }  .red {      background-color: red;  }  .green {      background-color: green;  }  .blue {      background-color: blue;  }  .yellow {      background-color: yellow;  }  

Here's my code so far: http://jsfiddle.net/7y9eK/

Answer by Suresh Ponnukalai for How to set 50% height on a child div of an auto height div?

Update your CSS like below.

.column {  width: 50%;  padding: 0;  margin: 0;  display: table-cell;  vertical-align: top;  }  .red {  background-color: red;  height:50%;  }  .green {  background-color: green;  height:50%;  }  

Updated jsfiddle below.

http://jsfiddle.net/7y9eK/14/

Answer by valerio0999 for How to set 50% height on a child div of an auto height div?

with javascript and jquery

(function myFunction() {        var imgHeight = $("img").outerHeight(true);      jQuery('.column').css('height', (imgHeight) + "px");      $(window).resize(function () {          myFunction();      });  })();  

http://jsfiddle.net/vlrprbttst/7y9eK/13/

i changed some css too.

basically this catches the height of the image and it appends it to the columns, this way your columns have a set px height and the 50% height for the rows now work because's their parent have a fixed height, even if it's dynamic (works on resize too!)

Answer by abdulbasit for How to set 50% height on a child div of an auto height div?

It is not possible by css only. You have to use below js for this.

And have to add height:100% to column class. so the updated class will look like this:

.column {  width: 50%;  padding: 0;  margin: 0;  display: inline-block;  vertical-align: top;  height:100%;  }  

Answer by Abhroo for How to set 50% height on a child div of an auto height div?

I updated your fiddle with desired output please go through the link: jsfiddle DEMO

CSS

body {      margin 0;      padding 0;  }  .container {      width: 100%;      display: inline-block;      padding: 0;      margin: 0;  }  img {      width: 100%;      padding 0;      margin 0;      border: none;  }  .column {      width: 50%;      padding: 0;      margin: 0;      display: inline-block;      vertical-align: top;  }  .row {      width: 100%;      height: 50%;      padding: 0;      margin: 0;      vertical-align: top;      display: inline-block;  }  .red {      background-color: red;  }  .green {      background-color: green;  }  .blue {      background-color: blue;  }  .yellow {      background-color: yellow;  }  

HTML

      
Upper half
Lower half
      
  
  

Answer by Kisspa for How to set 50% height on a child div of an auto height div?

// test you this code     .container {        width: 1000px;        display: table;        border:1x solid #ddd;         margin:10px auto;   }  img {      width: 100%;  }  .column {       width: 50%;       display: table-cell;       vertical-align:top;    }       .row {        display:table-row;   }   .red,.green {      background-color: red;      display:table-cell;      height:250px;      text-align:center;      vertical-align:middle;      font-size:20px;      color:#fff;     }     .green {      background-color: green;      }    .blue {      background-color: blue;       }    .yellow {       background-color: yellow;      }       // html code test        
      
                
        
          
              
                  
                      upper half                  
              
              
                  
                      Lower half                  
              
          
      
     
  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72