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:
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
Post a Comment