html - set same height for two divs which are not siblings of each other -


i have 2 divs not sibling of each other. have set height of both of them same in every case (i.e, if 1 of them grows in height other re-sizes accordingly).

i have seen these 2 approach:

http://jsfiddle.net/sdsgw/

http://jsfiddle.net/vkpmg/2/

but both of these sibling elements.

i have tried http://jsfiddle.net/ders/z1f6blop/

still applicable when using class= "row". , doesn't work without it.

html

<div class="col">     <div class="c1" >lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </div> <div class="col">     <div class="cl">lorem ipsum dolor sit amet, consectetur adipisicing elit. ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea @ corporis aliquam.     </div>  </div> 

css

.col, .cl {     display: table-cell;        padding: 1em;     border: solid; } 

any solutions?

edit:- interested in knowing exact way of setting height of 2 divs same (because both divs in different files, on same html page)

when use table-cell should use table (sometimes table-row) expected result cross browsers. either use body table or wrapper, "row" used. same flex, in sample links, needs parent column children. if not, need use script calculate each height , set same value two.

here sample using table/table-cell

.tbl {      display: table;      height: 100%;  }  .col {      display: table-cell;      padding: 1em;      border: 1px solid gray;      width: 50%;      height: 100%;  }  .cl {      height: 100%;      padding: 1em;      border: 1px solid gray;  }
<div class="tbl">            <div class="col">          <div class="cl" >              lorem ipsum dolor sit amet, consectetur adipisicing elit.          </div>      </div>            <div class="col">          <div class="cl">              lorem ipsum dolor sit amet, consectetur adipisicing elit.              lorem ipsum dolor sit amet, consectetur adipisicing elit.              lorem ipsum dolor sit amet, consectetur adipisicing elit.          </div>       </div>        </div>


Comments

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

How to show in django cms breadcrumbs full path? -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -