SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Responsive Equal Height Per 2 Coulmns

    I have this markup:

    Code:
    <div class="wrapper">
    <article>A</article> <article>B</article> <article>C</article> <article>D</article> <article>E</article> <article>F</article> <article>G</article> <article>H</article>
    </div>
    which is floated and forms a two-column list. Each article has a variable height due to its contents.

    What I want is each pair should have the same height based on which of the two has the tallest height. I have found variations of equalHeights plugin but all of them force equal heights to all elements. I just need each pair to be the same height, not all elements. Is this possible or are there any existing plugin for this?


    Expected Sample output:

    Code:
        |-------|---------|
        |   A   |    B    |
        |-------|---------|
        |       |         |
        |   C   |    D    |
        |       |         |
        |       |         |
        |       |         |
        |-------|---------|
        |       |         |
        |   E   |    F    |
        |       |         |
        |-------|---------|

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The best solution here may be to adjust your markup to represent the intended organisation of the page, by placing a section around each pair of articles.

    HTML Code:
    <div class="wrapper">
        <section>
            <article>A</article>
            <article>B</article>
        </section>
        <section>
            <article>C</article>
            <article>D</article>
        </section>
        <section>
            <article>E</article>
            <article>F</article>
        </section>
        <section>
            <article>G</article>
            <article>H</article>
        </section>
    </div>
    Last edited by paul_wilkins; Aug 31, 2012 at 02:59.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's impossible for me to change the markup.

    It comes from a CMS and all it output is:

    Code:
    <article>.....</article>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by GetWebHost View Post
    It's impossible for me to change the markup.

    It comes from a CMS and all it output is:

    Code:
    <article>.....</article>
    You're in luck then, for scripting can very easily adjust the markup in that kind of way.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •