Self clearing floats for portfolio using grid_x_of_12

Since you simply want to display your portfolio items across the screen, 4 per row, using my grid for each portfolio item is not your best option.

My grid works best when you have one row of columns and then another row of columns (ie. using a container with .row in conjunction with your columns)

For each portfolio item, simply use a div that’s floated left, that way when they reach the edge of your site, the next one will simply drop down to the following row.

If your site width is 1000px, for example, you could simply have a container similar to the following:

.portfolio-item {
   width: 230px;
   margin: 0 20px 20px 0;
   float: left;
}

The only thing you need to watch for, when laying out containers like this, is that they may not always flow how you expect them to, if some are longer than the others (unless you put are height on the container as well, so that they’re all equal)

Thanks for taking a look at this for me. Ah yeah, I was wondering whether the grid would work that way. I’ll switch to a container with a defined width and see how that works.

I’d still like to mimic the responsive aspect of your grid system, so do you think that I could use a percentage for the width? I appreciate that I’ll have to calculate as a percentage of the main content container (which is using the grid_12_of_12 class). Would I get away with using a percentage as long as I defined a min-width as well?

You could use percentages if you want. Either way, it’ll still be responsive because as the screen gets smaller and the portfolio items are floated left, they’ll simply dropp down to te following line if they don’t fit.

You can then have a media query for when the screen hits 350px (or whenever you think is necessary), to simply make the widths 100% and remove the margins. This way they’ll simply stack on top of each other nicely.

Hi Ahortin,

I’ve had a play and I’ve created a container that uses a percentage for the width and pixels for a min-width (to ensure that the client logo always fits inside the box). Thanks for pointing me in the right direction with the media queries – that’s so cool the way it stacks! : )

Couple of problems I can’t get my head around:

1. The portfolio-items are held in a containing element which has a portfolio-sidebar class. The styling for this is exactly the same as the home-sidebar class:

.portfolio-sidebar {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 32px;
	padding-bottom: 2rem;
}

As I can’t use the grid_3_of_3 class for the portfolio items I’ve had to specify a margin on the portfolio items. This means that the portfolio items are pushed in – they’re not aligned with the main content (H1, paragraphs etc) that are above. Is there a way that I can get the margins to work like the homepage widgets, so that the left portfolio items are flush against the left side?

2. As with the container that is used to hold the homepage widgets, I’ve added the clearfix class to the container that holds my portfolio widgets. However, as you alluded to in an earlier answer, some of the portfolio-items get stuck underneath each other, rather than beginning a new row. The only way I’ve got round this is to fix the height of the portfolio items. Should the clearfix class allow floated items to sort themselves automatically?

Thanks again!

Your portfolio item will be in a separate container, inside .portfolio-sidebar. Something along the lines of…

<div class="portfolio-side clearfix">
   <div class="portfolio-item">
      ...
   </div>
   <div class="portfolio-item">
      ...
   </div>
   <div class="portfolio-item">
      ...
   </div>
   <div class="portfolio-item">
      ...
   </div>
</div>

Your css for .portfolio-side will center that container within the page. For the .portfolio-items, you simply have something like…

.portfolio-items {
   float: left;
   margin-right: 20px;
   width: 250px;
}

This will ensure the items are flush on the left of the screen.

Clearfix wont fix the issue I mentioned previously,with floated items not sitting nicely under each other. That’s just the way floats work. The only way to fix this is to have a fixed height so they’re all the same. Clearfix would go on the .portfolio-side container, not the individual portfolio-items. It’s always on the parent parent container. ie. the container holding the floated items.

Thanks for your reply. Yeah, I probably wasn’t being very clear on the clearing issue – I’ve applied the clearfix class to the parent container in the hope that the child items would automatically clear themselves. (The ‘self clearing floats’ code that is in the tutorial I used has CSS that is very similar to the code used in Quark’s clearfix, so I thought it might work in the same way.)

I had a go with using just margin-right on the portfolio-items and it works as expected, but it does mean that there’s then an uneven margin across the page as a whole i.e. the right page margin is bigger than the left page margin. I just wondered how the homepage widgets manage to have a nice margin in between them and are flush against the left and right sides of the page.

That’s because it’s using my grid which has a left margin and in combination with :first-child to remove the left margin on the first item. The grid is only really suitable if you have one row of items though, not multiple rows.

Ah I see – that makes sense. Thanks for all your help on this, Anthony; happy to mark this thread as resolved.

Cheers,

Rob

Thanks