Solved

How do I get these columns to be equal size?

Posted on 2011-09-17
2
219 Views
Last Modified: 2012-05-12
I have a site here http://174.132.164.189/~artofste/index.php?option=com_juliaportfolio&layout=detail&catid=1%3Apaintings&Itemid=54 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.
@CHARSET "UTF-8";
.portfolio
{
	margin: 0px 5px;
}
.portfolioitem
{
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
}
.itemimage
{
	background: #fff;
	padding: 7px;
	border: 1px solid #ccc;
	margin: 5px 10px;
}
.itemdescription
{
	text-align: center;
	color: #ccc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 3px 5px;
}
.itemlink
{
}

.icon-48-portfolio
{
    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

0
Comment
Question by:Donnie Walker
[X]
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
2 Comments
 
LVL 10

Accepted Solution

by:
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.
0
 

Author Closing Comment

by:Donnie Walker
ID: 36555164
thanks!!
0

Featured Post

Technology Partners: 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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

751 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