Forums

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

Home Forums CSS Suggestions on how best to achieve this fluid layout

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #241089
    ajdf
    Participant

    https://trello-attachments.s3.amazonaws.com/569fad68540ebd161e538db0/326×449/738243162d47b6429144b1a85bad3543/artist_tracked_on.jpg

    I have tried and failed to achieve this layout using many different approaches…

    The basic layout is easy to achieve with float:left, width 67% on image container, and float:left; width:33% on the A tag, all within the parent div.combo-container…

    It’s the 2 boxes on the right, containing the star and the text, that need to be vertical AND horixontal centered to their 50% height containers…

    I thought I could do it with flex-box, but because I don’t know the height of the parent container ( it depends on the image size, which is fluid ), it makes flex-box useless.

    I tried setting it to 100% height but it doesn’t make a difference.

    Any idea how YOU would go about achieving this layout would be most welcome.

    I’m starting to wish I could just use a table, it would be so easy with a table layout!

    I haven’t said that since 2006.

    Anyway, peace and thanks.

    #241090
    Paulie_D
    Member

    I’m starting to wish I could just use a table, it would be so easy with a table layout!

    Then why not use CSS tables?

    However, some code would be nice, ideally in a Codepen.io demo.

    #241091
    Paulie_D
    Member

    That said…flexbox doesn’t seem too much of an issue.

    http://codepen.io/Paulie-D/pen/BKqqEm

    #241271
    ajdf
    Participant

    Hey, thanks a lot for your suggestion here.

    We have 1% Windows Phone IE users which amounts to 1-2,000 hits per month… do you think I should right off Flexbox in light of this fact?

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