2 blocks the same height in different parent columns

Question

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):

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?

Since they (the 2 text elements) can't see each other, you either need to mimic the image or use a script ... and this is needed whether use Flexbox or not — Asons, Nov 27 '17 at 20:07
Yeah that's what I thought, they're of no relation so it's impossible to make them match up without JS or something. I thought about having the 2 (bottom) text containers in a row and the image + blank space above in a separate row but that then makes the fullbleed left images awkward. Certainly a tricky one! — user1406440, Nov 27 '17 at 20:30
You've used the tag `jquery` sor here is an easy solution. The matchHeight plugin https://github.com/liabru/jquery-match-height I'm not telling you that it's the best solution, but it's an easy one — Amaury Hanser, Nov 27 '17 at 21:01
As you tagged it `jQuery`, in the dupe's answer you find both what is needed for it to work with CSS, and 2 script solutions. Also, with a small markup change you can make your sample work with Flexbox: https://codepen.io/anon/pen/WXgaVE — Asons, Nov 28 '17 at 07:42
That looks great LGSon I was about to give it a try but I think one problem with that will be now I can't set a background image on the left side 'column' as its broken up into essentially 4 quarters now? Otherwise that looked great! — user1406440, Nov 28 '17 at 08:15

score 0 · Answer 1 · answered Nov 27 '17 at 22:46

My approach would be something like as follows, with pure css, making use of flexbox. Obviously the exact implementation depends on a couple of things, like how you are going to display the images (e.g. <img> tags or in background), but this is just to share the main idea.

/* basic reset */
* {
    box-sizing: border-box;
}
body {
    position: relative;
    margin: 0;
    padding: 0;
}

/* layout */
#background {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: LightGrey;
    z-index: -1;
}
#content {
    display: flex;
    flex-direction: column;
}

.row {
    flex: 1;
    display: flex;
}

.col {
    flex: 0 0 50%;
    padding: 50px;
}

#wide-image {
    overflow: hidden;
    padding: 0;
    background-color: GhostWhite;
}

<div id="background"></div>

<div id="content">
    <div class="row">
        <div class="col"></div>
        <div id="wide-image" class="col">
            <img src="http://via.placeholder.com/720x318" />
        </div>
    </div>

    <div class="row">
        <div class="col">
            <h1>Some text here</h1>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="col">
            <p>Lorem ipsum dolor sit amet</p>
            <p>Lorem ipsum dolor sit amet</p>
            <p>Lorem ipsum dolor sit amet</p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
</div>

2 blocks the same height in different parent columns

1 Answers1