Streaming live at 10am (PST)

Image offset overlapping background

#1

Hey all,

Need help from the pros on how to compose this pattern I am trying to duplicate.

It looks straight forward where there’s a grey background with left (image) and right (text) put into a 2 column grid but what stumping me is in the example below. The grey background is a shorter width. Any suggestions how to approach this?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Set a negative right side margin on the left column with the content in it which will push it into the right box. Then on the right box add enough padding to offset that.

You can also do it by making the parent column position relative and then using absolute positioning on the element to move it wherever you want. Both options will be a bit of a struggle to make responsive though.

#3

Thanks @DFink! I’ll give it a try.