Grow your CSS skills. Land your dream job.

Trying to figure out baseline grid

  • # January 7, 2013 at 2:08 pm

    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

    # January 7, 2013 at 2:12 pm

    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.

    # January 7, 2013 at 2:14 pm

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

    # January 7, 2013 at 2:17 pm

    [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 :)

    # January 7, 2013 at 2:19 pm

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

    # January 7, 2013 at 2:21 pm

    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 :/

    # January 7, 2013 at 2:23 pm

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

    # January 7, 2013 at 2:29 pm

    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?

    # January 7, 2013 at 2:35 pm

    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; }

    # January 7, 2013 at 3:33 pm

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

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

    # January 7, 2013 at 3:34 pm

    @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.

    # January 7, 2013 at 4:18 pm

    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.

    # January 7, 2013 at 10:28 pm

    @wragen22 I’ve written a couple of articles on `line-height` and baseline grids. Feel free to have a read:

    http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/

    http://joshnh.com/2012/10/12/how-does-line-height-actually-work/

    Unfortunately (as explained in the `line-height` article), you can’t get what you want without the use of a ‘magic number’, and even then, it will be slightly different depending on the typeface and browser.

    # January 7, 2013 at 10:51 pm

    [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.

    # January 7, 2013 at 10:52 pm

    @wolfcry911 I wasn’t sure if using an `

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

      ` tags) inside it.

Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".