0

I have a few consecutive section elements each of which contains a heading tag. Would it be possible to force the browser to render those heading tags with exactly the same heights using just the CSS (making the browser use the largest computed value without actually specifying an exact value). Following code fragment should provide you with a clearer picture of what I have in place and which parts I want the browser to render using the 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 some of the headings in this structure can have text that spans a couple of lines resulting in varying heights for the headings, I would like to know a solution using CSS, if one exists, that can force the browser to use the largest value of height of the three heading tags for all three of the tags.

Notes:

  1. All three of the sections in this scenario would be placed in a row horizontally next to each other, which necessitates balancing the height of the major heading elements.
  2. Use of Javascript is not permitted.
  3. Although heading elements can be taken out of the section elements, but I would like to keep the semantics.

Based on the aforementioned, if a solution can be found, then I would greatly appreciate your input.

rink.attendant.6
  • 36,468
  • 57
  • 89
  • 143
DisinterestedObserver
  • 121
  • 4
  • 2
    Honestly, I don't think so. You probably should use JavaScript to achieve this. – Hashem Qolami Aug 28 '13 at 10:53
  • 1
    It may not be the ideal solution, but could you divide the `section` `height` into a percentage value? – Xareyo Aug 28 '13 at 10:58
  • There is no way that this can be done by CSS alone. CSS cannot scan an entire page and then compute a height value and then repaint the page accordingly. JavaScript/jQuery is the way to go. Short answer is: NO! – Marc Audet Aug 28 '13 at 11:35
  • Thank you guys. I had this feeling that I have a dead end with CSS, but just wanted feedback from those who use the language on a daily basis. Thanks once again. – DisinterestedObserver Aug 28 '13 at 11:52

1 Answers1

1

I did actually do a post about this problem this morning, please see: Set height of 3 elements, taking largest value, across multiple rows

I don't think it is possible without the 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/

Community
  • 1
  • 1
Simon Staton
  • 3,947
  • 2
  • 22
  • 47