Magazine Inspired Photo Layout

[nichlas]

Hi, I’m trying to get this layout to work:
http://codepen.io/nichlas/pen/azvoVj

All the image styles should have the same width (including the padding) at all times and end up at 1200px max-width. And I want the vertical images (.left and .right) to stay together with no spacing.

It works up to a certain point, but the ones with padding does not stop scaling and the vertical images slips away from each other.

Any tips? :)

[nichlas]

It was a lot of help! Thank you so much, the outline code is such a helpfull tool to use when building layout! And the box-sizing css rule is what I was looking for I guess. What I need now is to force the verticals to stay on the same line.

Yes, I want the vertical images to be the same width as the horizontal ones combined.

Did some edits on your fork and increased the max-width of the .full class to 1200px again because of the box-sizing.

http://codepen.io/nichlas/pen/gbabgj

[nichlas]

Yes! Perfect Atelierbram!

I updated my demo with your new edits, but I changed the padding to percentage.

How can I center all the content now? If I remove the float: left; from .left, .right classes, I get a gap between them..

I want all the images to be centered on the page. Like I have on my website now.

[nichlas]

That sounds good! I updated my demo with your code now. I also combined .left and .right to .vertical to simplify the code.

Thank you so much for all your help Atelierbram!

[nichlas]

I’m not sure what’s happening.. But when I try to implement it in my wordpress theme, the verticals doesn’t line up properly..?

http://itsnwa.com/photo/

[nichlas]

Yes! that did the trick! :)

Thanks for all your help Atelierbram!

[Author]

Posts