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

Tiffany McAllister
Tiffany McAllister
25,806 Points
Posted by Tiffany McAllister
Tiffany McAllister
25,806 Points

Div positioning and separate containers

I'm working on a layout using Flexbox which consists of images in a grid. There are two containers: one for "recent projects" and another for "additional projects", however on smaller screens they need to stack in two columns. The images below help demonstrate this. I have put a red border around the two containers and a yellow border around elements which are hidden on smaller screens.

Desktop view: https://dl.dropboxusercontent.com/u/10434869/desktop.jpg

Mobile view: https://dl.dropboxusercontent.com/u/10434869/mobile.jpg

The issue I'm having is getting them to stack in two columns due to the separate containers.

https://dl.dropboxusercontent.com/u/10434869/problem.jpg

Is it possible to get the images in the second container to move up beside the last image in the first container?

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

So on mobile, when there are 3 blocks (from the top red section), you want the blocks from the other red section to flow with them so you always have 2x2x2?

You could set the containing divs (both red sections) to be display:inline. You'll be essentially removing the div without removing its content. A div's default nature of being display:block is causing your second red section to clear the other 3 blocks.

I don't know if that makes a whole lot of sense but it's the best I can do without seeing your html/css.

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

Hi Jeff,

Thanks for your response. Yes, that's exactly what I want it to do. I've tried setting the containers display: inline but the blocks from the bottom section are still not flowing with the other blocks.

I will set up a codepen with my code so you can see what I have so far.

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

Ok, so here's a quick codepen http://codepen.io/tiffmc/pen/JdVZJR

So, all the blocks stack into one column on screens below 500px. On screens above 500px, I'd like them to flow together 2x2.

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Hi Tiffany, I haven't worked much with display:flex but for the route I was thinking:

.recent-projects-wrapper,
.additional-projects-wrapper {
  display: inline;
}
.recent-project,
.additional-project {
  float: left;
}

That seems to give you the result you're looking for but there may be a better route to go with flex.

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

Thanks so much, Jeff. You're a genius :)