Forums

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

Home Forums CSS Tiled layout alignment – flexbox?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #263008
    grimski
    Participant

    Hi there,

    I’m trying to create a layout that has 2 columns side by side. 1 contains text over a background image, the other contains a wide image at the top with a block of text below. Here’s a quick sketch from the mockup (wasn’t sure on the best way to link to any image):

    https://ibb.co/fZw6V6

    So, the problem I have is, how do I align the left column text with that on the right? Obviously they’re in 2 separate divs so don’t really have much of a connection to one another. So that’s the tricky bit.

    Here’s a CodePen:
    https://codepen.io/moy/pen/wPEdjo

    So I’ve used flexbox to set the divs so they have the same height, I’m not sure if that’s the best approach? And currently the text is vertically centred. I thought about aligning the text to the bottom but that wouldn’t do it either, as the text should be centred to be inline with each other, like the sketch.

    The only thing I can think of is adding a spacer image the same aspect ratio of the left image. But yet again, the text probably wouldn’t be centred the way I need it? I suppose instead of a spacer I could use the :before element to the same affect with percentage height/width.

    So basically I’m stuck! Any ideas? Is flexbox the best/only solution for this?

    #263009
    Paulie_D
    Member

    Basically with flexbox you can’t!

    There is no flexbox method of aligning elements that do not share a parent element.

    You might be able to do something with a couple of rows in flexbox but I’d be reaching for CSS Grid here at first blush.

    #263019
    grimski
    Participant

    Yeah that’s what I thought, they’re essentially completely separate. Have no connection so it’s impossible to get the 2 to work together. I’ll try the spacer image or :before element to see what that results in. If that doesn’t cut it I might just need to add margin/padding to the left sided content block to align it the best I can.

    I have another layout, 2 column, which has a square image (inline) filling the entire left column. In the right I just have text. I’ve used flexbox to vertically centre the content there. That’s the best way of doing that to isn’t it? I know vertically alignment and CSS has always been a bit tricky but thought this would be the best way. Thought I could maybe use vertical-align: middle if both column divs were inline-block but not sure it’d work as well as flex?

    #263044
    grimski
    Participant

    As a bit of an aside and not to spam the forum with a new thread!

    I have a similar bit of HTML which has an full-bleed inline image in done column (div) and vertically/horizontally centred text in the other column. The markup looks like this:

    Title etc etc

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    </div> </div>

    The layout works pretty well but I noticed when I reduce the width of my screen, if the content in the right column becomes larger the full-bleed image has gaps around it. Is there a way to make sure the image always fills the space while keeping the aspect ratio? So maybe it just crops?

    EDIT No idea why my code is formating this way, all seems ok?!

    #263062
    Paulie_D
    Member

    If you need to demo code, a Codepen.io demo is much preferred.

    #263088
    grimski
    Participant

    Sorry, was just confused as to why the code example did that!

    Here’s a CodePen: https://codepen.io/moy/pen/jaQPqP

    You’ll need to shrink the window down a fair bit on this example to see the image not span the height (maybe width) of the column.

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