How do I get these columns to be equal size?

Posted on 2011-09-17
Last Modified: 2012-05-12
I have a site here that displays a series of paintings in columns.

I cannot get the columns to stay the same width. If you change the number of items displayed by changing the bottom dropdown to "10" and then jump to page 4 you can see it only has 3 paintings and they are bunched together.

Any help would be appreciated.
	margin: 0px 5px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
	background: #fff;
	padding: 7px;
	border: 1px solid #ccc;
	margin: 5px 10px;
	text-align: center;
	color: #ccc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 3px 5px;

    background-image: url('../images/icon-48-portfolio.png');

div.portfolioitem {margin-left: auto; margin-right: auto;  width: 170px;}

.portfolioitem.col-1 {
  margin-right: 5px;


.colset-1 .col-1 {
  width: 19.3%;


.col-1,.col-2,.col-3,.col-4 ,.col-5 {
 float: left; 
  border: 1px solid white;

.colset-2 .col-1,.colset-2 .col-2 {
  width: 19.3%;

.colset-2 .col-2 {
  float: right;

/**/ /**/
.colset-3 .col-1,.colset-3 .col-2,.colset-3 .col-3 {
  width: 19.3%;

.colset-3 .col-3 {
  float: right;

/**/ /**/ /**/
.colset-4 .col-1,.colset-4 .col-2,.colset-4 .col-3, .colset-4 .col-4 {
  width: 19.3%;

.colset-4 .col-4 {
  float: right;

/**/ /**/ /**/  /**/
.colset-5 .col-1,.colset-5 .col-2,.colset-5 .col-3, .colset-5 .col-4, .colset-5 .col-5 {
  width: 19.3%;

.colset-5 .col-5 {
  float: right;

Open in new window

Question by:Donnie Walker
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 10

Accepted Solution

acbxyz earned 500 total points
ID: 36555124
Line 36:
div.portfolioitem { width: 170px;}
will be overwritten with line 81 to 83
.colset-5 .col-1,.colset-5 .col-2,.colset-5 .col-3, .colset-5 .col-4, .colset-5 .col-5 { width: 19.3%; }

If you remove the .colset-5 .col-n (and increase the 170px a bit) you should get what you want.
Besides, the little gap of 5 pixels from 38-41 is only between the first and second column.

Author Closing Comment

by:Donnie Walker
ID: 36555164

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question