Tiled layout alignment – flexbox?

[grimski]

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?

[Paulie_D]

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.

[grimski]

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?

[grimski]

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?!

[Paulie_D]

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

[grimski]

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.

[Author]

Posts