Solved

How do I get these columns to be equal size?

Posted on 2011-09-17
2
217 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Remove greater than sign 3 43
WordPress Themes 10 34
Materializecss - Different Behaviors in Browser's 1 19
Change javascript css 1 19
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 …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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 …

911 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

22 Experts available now in Live!

Get 1:1 Help Now