Solved

How do I get these columns to be equal size?

Posted on 2011-09-17
2
216 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
2 Comments
 
LVL 10

Accepted Solution

by:
acbxyz earned 500 total points
Comment Utility
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
Comment Utility
thanks!!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now