CODEWITHSUNDEEP
jqueryhtmlcss
CarlTaylor1989
CarlTaylor1989

Reputation: 209

Aligning header tag to be the space

I'm having an issue with aligning the space between header tag and paragraph tag below it (example below)

<div class="row">
    <div class="col-lg-6">
        <h2>Lorem ipsum dolor sit amet, consectetur</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
     <div class="col-lg-6">
         <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
</div>

Basically, is there a way to set the H2 height if one of the heights is bigger because of more text and drops down a second line? so that the two H2 heights still match. I am using wordpress so the title heights may vary depending on current posts.

Please let me know if you need more info!

Thanks

Upvotes: 0

Views: 48

Answers (3)

user3035775
user3035775

Reputation: 1

I find it easier to have headers in their own divs, wherever they are. That way, you can always style them and set sizes, margins and padding seperately. See my example below;

<div class="row">
    <div class="col-lg-6">
        <div class="header">
            <h2>Lorem ipsum dolor sit amet, consectetur</h2>
        </div>
        <p>Lorem ipsum etc etc.</p>
    </div>

    <div class="col-lg-6">
        <div class="header">
             <h2>Lorem ipsum dolor sit amet, consectetur</h2>
        </div>
        <p>Lorem ipsum etc etc.</p>
    </div>
</div>

Upvotes: 0

user3033164
user3033164

Reputation:

You can set class or H2 width bigger in css, that your H2 wont drop down in second line, and also u can set height for all H2, if you your H2 goes on second line , so they would be at same size.

Upvotes: 0

SW4
SW4

Reputation: 71160

Given that you'll likely have dynamic content, there isnt a way to dynamically control this ar runtime using CSS.

However, in jQuery, you can do:

var height = Math.max.apply(null, $(".row h2").map(function (){
    return $(this).height();
}).get());
$(".row h2").css({height:height+'px'});

See this fiddle, you may need to run it when the second header is on two lines so you get an idea.

What this does is grab the maximum height of the header elements (so get the largest), and apply that to each one.

Upvotes: 1

Related Questions