Hello,
I’m relatively new to coding and just can’t get my head around positioning of elements. I am wanting to create a design like the image below (I hope the image works), and in my head it seems simple, but when it comes to coding it just doesn’t work the way I want.
I basically have two divs called “work-content-left” and “work-content-right”. The left one is to hold the images and the right to hold the heading, paragraph and text link. The right hand one works fine and was easy. However the positioning of the left in that staggered look is confusing me. I assumed that I should set the left div to relative and have all the images inside set to absolute? This results in all the images and “work-content-left” div disappearing. I tried setting heights for the div and for the images but it doesn’t seem to solve it.
I am also confused about which method I should use to lay them out in that manner. Should I be using the position attributes (top, bottom, left, right) or the spacing attributes (margin)?
I also require the left div and right div to be centre aligned (probably using flex box - correct?), which sometimes I have issues with as the left div (“work-content-left”) has a different shaped bounding box to the images (images seem to overflow the boundary of the div rather than extend it), which means that the text on the right is being aligned to the div but the div isn’t the correct size.
I appreciate that this could be a very simple thing, I just can’t get my head around it. Please let me know if the links do not work.
Many thanks,
Angus
Here is my site Read-Only: LINK (You may have to click on the furthest left breakpoint to show my work for some reason)
(how to share your site Read-Only link)