Trying to figure out baseline grid

[wragen22]

Hi folks,
I’m trying to figure out grids and baseline. Can someone help me understand why the h2 is positioned at the top and the h1 is on the bottom? I’m trying to get this down.

http://codepen.io/wragen22/pen/hqFHn

[lucas572]

What exactly are you trying to do here?

The h2 appears higher because it is smaller and has a different line height to the h1.

[dfogge]

hm, are you trying to get the h1 and h2 onto the same baseline?

[lucas572]

[Grid Lover](http://www.gridlover.net/ “Grid Lover”) might be a good tool to have a look at if you want to learn about Baselines :)

[wragen22]

Yes, I am trying to get them both on the same baseline. Adjusting the line-height still does not get that fixed though… :-/

[lucas572]

Yea, line-height will only really take effect on the 2nd line. You could padding top the div maybe? Though that’s probably not a very robust solution :/

[wragen22]

Is the solution to just ditch two different columns and go for a one line “01. title”

[lucas572]

You could put the 01. in a `` to change the font size, then stick some padding right on it to kick the Title away if you wanted to keep the space?

Then there’s no need for the extra div and you’d get them on the same line. Depends what you want to achieve with it though, was there a reason for the 2 divs?

[wragen22]

I would like the left number to just serve as a left margin. And the title to server as the paragraph column in which text will be aligned directly under.

thinking this might be my solution –

div class=”heading”
h1>first words h2>Second words/h2>
/div>

.heading h1, h2 { display: inline; }

[chrisburton]

@lucas572
> Yea, line-height will only really take effect on the 2nd line.

Not true. It effects the top and bottom of the text.

[chrisburton]

@wragen22 I’m not sure if that’s “semantically” correct. Your H1 should come before the H2. I wouldn’t consider a numeric value that important in this case. Throw it in a span.

[chrisburton]

I talked to Brad in GChat and we came up with an alternate solution to just use an `

`.

http://codepen.io/chrisburton/pen/gpmtn

Edit: After further discussion, the above might not be feasible since there will be content following the title.

[wolfcry911]

[Here’s a fork](http://codepen.io/wolfcry911/pen/Cacqo “”) of chrisburton’s pen. If you’re using numbers, I like the ol

[Here’s another](http://codepen.io/wolfcry911/pen/aoCfr “”) version using the two headers you originally had.

[chrisburton]

@wolfcry911 I wasn’t sure if using an `

` would be okay since he needed to have content (`

` tags) inside it.

[chrisburton]

@joshuanhibbert Thanks, Josh.

[Author]

Posts