html - Balancing the height of an element in two different containers using CSS -


i have few consecutive section elements each of contains heading tag. possible force browser render heading tags same heights using css (making browser use largest computed value without specifying exact value). following code fragment should provide clearer picture of have in place , parts want browser render using largest computed value of height.

<section>    <h2>heading one</h2>    <img src = ''>    <p>some text</p> </section> <section>    <h2>heading two</h2>    <img src = ''>    <p>some text</p> </section> <section>    <h2>heading three</h2>    <img src = ''>    <p>some text</p> </section> 

as of headings in structure can have text spans couple of lines resulting in varying heights headings, know solution using css, if 1 exists, can force browser use largest value of height of 3 heading tags 3 of tags.

notes:

  1. all 3 of sections in scenario placed in row horizontally next each other, necessitates balancing height of major heading elements.
  2. use of javascript not permitted.
  3. although heading elements can taken out of section elements, keep semantics.

based on aforementioned, if solution can found, appreciate input.

i did post problem morning, please see: set height of 3 elements, taking largest value, across multiple rows

i don't think possible without use of javascript/jquery

using jquery:

var $sections = $('section');  $sections.filter(':nth-child(3n-2)').each(function () {     var $this = $(this),         $els = $this.nextall(':lt(2)').addback();      var sectionheight = new array();     $els.each(function () {         var value = $(this).height();         sectionheight.push(value);     });     var newsectionheight = math.max.apply(math, sectionheight);     $els.height(newsectionheight); }) 

arun p johny's fiddle: http://jsfiddle.net/arunpjohny/6jqb2/


Comments

Popular posts from this blog

Unable to remove the www from url on https using .htaccess -