Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS List item content misbehaving

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36192
    stat30fbliss
    Member

    Hello all!

    So in a nutshell, I am building a list item for news articles that will alternate light and dark backgrounds. Each list-tem will hold two columns of content. the first column holds an image anda caption, the second a paragraph of text. It took me forever to get the list-item backgrounds to just expand with my columns.

    Now, the backgrounds are expanding but, when I jack up the amount of text in the right column paragraph, the left column image and caption will not stay positioned at the top of the list-item. It is moving downwards with the paragraph as it grows.

    To see what I mean, check out my jsbin

    Static: http://jsbin.com/iwetef/

    Live: http://jsbin.com/iwetef/edit#html,live

    Again, I am wanting the image and caption content to stay aligned to the top regardless of how large the paragraph text gets.

    Cheers!

    #94934
    Oskar
    Participant

    Quick, easy solution is to float column1 to the left.

    #94940
    stat30fbliss
    Member

    I had tried that, but due to the fluctuation of the content, i need both columns to be able to effect the height…

    #94947
    stat30fbliss
    Member

    I figured it out! Go take a look at me JSBIN in case anyone is interested in the CSS. Hope it can help someone else!

    Static: http://jsbin.com/iwetef/

    Live: http://jsbin.com/iwetef/edit#html,live

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.