Treehouse: Grow your CSS skills. Land your dream job.

Magazine Inspired Photo Layout

  • # November 29, 2014 at 8:31 am

    Hi, I’m trying to get this layout to work:

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

    # November 29, 2014 at 9:10 am

    You want the “vertical images” combined to be the same width as the other images? Maybe this fork of your demo gives you some ideas, not claiming that I solved your problem.

    # November 29, 2014 at 9:59 am

    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.

    # November 29, 2014 at 10:38 am

    … force the verticals to stay on the same line.

    edited my fork of your demo, you can do:

    .right { 
      width: 50%;

    BTW On very small screens, those big values for padding are causing images to shrink beyond recognition, no?

    # November 29, 2014 at 11:48 am

    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.

    # November 29, 2014 at 12:07 pm

    Since your biggest image is 1200px wide, why not set the .content-container to max-width: 1200px? Then you basically can get rid of the .super and .full classes as well, when having img { max-width: 100%;} Updated my fork of your demo with this:

    .content {
      /* width: 100%; */ 
      max-width: 1200px;
      margin: 0 auto;
      overflow: auto;
    # November 29, 2014 at 2:47 pm

    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!

    # November 29, 2014 at 6:54 pm

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

    # November 30, 2014 at 2:33 am

    Two things to prevent this from happening:

    1. Be sure to be in the code tab , and not the WYSIWYG tab of WordPress editor and remove all the white-space and line-breaks between your image-tags, making those angle brackets touch each other: <img src="img-1.jpg" alt=""/><img src="img-2.jpg" alt=""/>
      • this is to prevent WordPress from automatically inserting <p>-tags with every line-break (now all your floating images are inside those <p>-tags; which besides being unsemantic, is’t helping the layout either)
    2. Floats needs to be cleared, there are a couple of ways to achieve this, one of the first things you can try is to set the value of the overflow property on the container to auto or hidden:
    .fiftymm {
      overflow: auto;
    # December 1, 2014 at 11:27 am

    Yes! that did the trick! :)

    Thanks for all your help Atelierbram!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.