Two Columns In One Post

  • Resolved chrislawhorn

    (@chrislawhorn)


    13 years, 1 month ago

    I have a site, where I have two columns within each post.

    You can see an example here:

    https://www.runhundred.com/category/time/2010s/

    Basically, the links and audio is floated to the left. And the poll is floated to the right.

    I’m pretty happy with it. But, here’s my question:

    On the left column, there’s a <div> section for the audio player, then another for the links beneath it.

    I’d like for the right column to start at the same height as the audio player. But, instead, it starts at the same height as the link section.

    I presume this is because there are two <div> sections on the left and just one on the right. But, maybe I’m overlooking something.

    Any idea how I can move the right column up half an inch or so?

Viewing 7 replies - 1 through 7 (of 7 total)

  • only seems to be the case in the top post ‘the strokes ..’ (where the audio player is actually in a div .top, and not within any of the columns) – but seems to be ok in all other posts.

    Thread Starter chrislawhorn

    (@chrislawhorn)

    Sorry. I should have clarified that.

    The Strokes post is the one with which I’m experimenting.

    https://www.runhundred.com/workout-music/the-strokes-taken-for-a-fool-138-bpm/

    Here’s an example of another post:

    https://www.runhundred.com/workout-music/enrique-iglesias-pitbull-the-wav-s-i-like-how-it-feels-129-bpm/

    The problem with the other posts is that the size of audio-player is undefined. Accordingly, when a browser is loading it, the site shifts slightly once the audio player finishes loading.

    To fix this, I’d put the audio player in its own <div> section–in the Strokes post–with styling info on the the height (40px).

    So, now the site doesn’t shift during the loading. But, adding that height styling has pushed the right column down by 40px as well.

    To that end, I’m trying to figure out a way to assign the height to the audio player, without pushing the right column down by the same margin.

    The strange thing is, it’s only on the first post that the second column is aligned with the “Download” label. On subsequent ones, the alignment looks pretty much how you’re saying you want it — in FF anyway. I can’t see why this should be.

    I wonder what would happen if you put your div.col2 above your div.top in the HTML?

    Cheeers

    PAE

    Thread Starter chrislawhorn

    (@chrislawhorn)

    Nevermind, I figured it out.

    I’d been putting the DIV class and style information in the same section:

    <div class=”col1″ style=”height: 40px;”>

    What fixed it was moving it into two different sections:

    <div class=”col1″><div style=”height: 40px;”>

    This way I could close the style section with a </div> without closing off the “col1” section.

    Problem solved!

    Thanks for your help, alchymyth and peredur!

    If all you were interested in was the top one, you could fix that with a negative margin without the need for ‘divitis’.

    I trust you’re going to put your styles into a stylesheet at some point.

    Cheers

    PAE

    Thread Starter chrislawhorn

    (@chrislawhorn)

    I tried the negative margin, before I posted to the forum, but without success.

    But, tell me more about the latter point. Most of the class stuff is in the CSS, but could I consolidate it further?

    The worked for me:

    .post-excerpt .col2 {
  margin-top: -30px;
}

    I didn’t post it because I didn’t realise you were only concerned with the top item.

    I take it that was the ‘latter point’ you were referring to.

    Cheers

    PAE

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Two Columns In One Post’ is closed to new replies.