Self clearing floats for portfolio using grid_x_of_12

Resolved CaptRobovski
(@captrobovski)

10 years, 7 months ago
Hi Ahortin,

I’ve been building a portfolio page for use in Quark using a custom post type. I’ve basically followed the tutorial here.

To fit better with the theme and to make it responsive, I’ve attempted to create a new page template (using the full width template supplied with Quark as a basis) and create a new sidebar a la how you created the sidebar-front for use with the front page template.

Within the sidebar-portfolio.php file that I’ve created each portfolio item is contained in a div with a class of “grid_3_of_12” (as I want to have a maximum of four portfolio items per row). This sets the width of the portfolio item boxes fine, but I’m having problems clearing the float on the fourth item so that the fifth item jumps down to the far left on a new row – instead it sits underneath the fourth item because there’s space for it.

Is it possible to use the grid_x_of_12 classes to arrange items in 4×4 grid, or am I limited to using them on a single row? If I was hard coding the portfolio page I would just assign a clearfix class to the relevant items, but as the portfolio posts are pulled dynamically by WordPress I’m stuck. Using an nth-child rule might work but its support is limited in IE…

I’m racking my brains trying to think of a solution (I’ve spent way to long on this!) – any ideas on where I’m going wrong? The code for the sidebar is below:
```
<?php
/**
* This is a sidebar that Rob has coded based on the sidebar-front widget
*
* Next line calls the latest portfolio posts
*/
query_posts('post_type=portfolio&posts_per_page=9');

?>

<div id="secondary" class="portfolio-sidebar row clearfix">



<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<?php
		$title= str_ireplace('"', '', trim(get_the_title()));
		$desc= str_ireplace('"', '', trim(get_the_content()));
	?>

	<div class="col grid_3_of_12">
		<div class="widget-area" role="complementary">
		<div class="portfolio-box">
		<div><h3><?=$title?></h3></div>
		<div><?php the_post_thumbnail(); ?></div>
		<div><p><?php print get_the_excerpt(); ?></p></div>
		<div><?php $site= get_post_custom_values('projLink');
				if($site[0] != ""){	?>
				<p><a href="<?=$site[0]?>">Read more</a></p>
				<?php }else{ ?>
				<p><em>Live Link Unavailable</em></p>
				<?php } ?></div>
		</div>
		</div> 
	</div> 

<?php endwhile; endif; ?>



</div> 
```

Viewing 9 replies - 1 through 9 (of 9 total)

Theme Author Anthony Hortin
(@ahortin)

10 years, 7 months ago
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)
Thread Starter CaptRobovski
(@captrobovski)

10 years, 7 months ago

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?

Theme Author Anthony Hortin
(@ahortin)

10 years, 7 months ago

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.
Thread Starter CaptRobovski
(@captrobovski)

10 years, 7 months ago
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!
Theme Author Anthony Hortin
(@ahortin)

10 years, 7 months ago
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.
Thread Starter CaptRobovski
(@captrobovski)

10 years, 7 months ago

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.

Theme Author Anthony Hortin
(@ahortin)

10 years, 7 months ago

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.

Thread Starter CaptRobovski
(@captrobovski)

10 years, 7 months ago

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

Cheers,

Rob

Theme Author Anthony Hortin
(@ahortin)

10 years, 7 months ago

Thanks

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Self clearing floats for portfolio using grid_x_of_12’ is closed to new replies.

Tags