Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jennifer Hughes
Jennifer Hughes
11,421 Points

Three column layout with images, paragraphs, and headers inside divs.

I have six divs, each containing an <img>, <h1>, and <p>, and I am wanting them to be in three columns with equal spacing between each div when the page is at least 1040 px wide.

I have set the sizes of the divs to have the same heights and widths, and I can create three columns. However, there is unequal spacing between each div. Also, when I enlarge the screen size past 1040px, the columns become a mess. I thought adding a media query would solve for this, but it's not working, so I must be doing something wrong.

Can anyone point me in the right direct for creating three columns with equal spacing and for them to remain in tact when I enlarge the screen?

My code is here: https://github.com/Hughes064/Responsive-Website

Thanks!!

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Edited for HTML tag display.

1 Answer

Per Karlsson
Per Karlsson
12,683 Points
Per Karlsson
Per Karlsson
12,683 Points

Hey Jennifer Hughes,

I'm guessing there are a few solutions to you problem. Since you've set your port-piece class to a fixed width and height I'm guessing you don't want them to scale after a 1040px screen width and higher?

You could always add a containing div around your other divs and add some styling to it.

I played around with a div and these are the numbers I came up with.

.container {
    width: 1017px;
    margin: 0 auto;
    padding: 0;
}

I'm sure there's a fancier way than mine to solve this :)

Good luck!

Jennifer Hughes
Jennifer Hughes
11,421 Points

Hi Per,

Thanks for your response.

I actually do want it to scale for larger screens, so I better remove the fixed width and height, which also means your proposed solution will unfortunately not work.

Did you take a look at my code and what it's returning? The issue is 1) the spacing between the divs is not equal and 2) If the screen goes larger than 1040px, the columns get messed up.

Thanks!