Hey Guys,

 

The problem can be seen here: http://collossalpixel.com/portfolio/

 

Each .porfolio-item is brought in through Wordpress via PHP. This means that there are multiple Divs with the same class but with different content inside.

 

What I am trying to do, is equally spread out 3 Divs on each 'row' so to speak.

 

Dimensions are shown below.

 

.p-wrap {

width: 960px;

}

 

.portfolio-item {

width: 270px;

float: left;

margin-right: 75px;

}

 

I have floated each .portfolio-item left and then added in a margin-right of 75 to produce the gap.

 

This works well for the first 2 elements, but the third is forced down to the 2nd 'row' because it does not fit onto the line. Putting in the margin-ritight was the only way I could think of to get that spacing between each element.

 

Obviously this hasn't worked.

 

I have provided an image as well to try and help explain the situation. All can be clearly seen using Firebug in FF.

 

Image can be found here: http://www.collossal...xplanartion.jpg

 

Hopefully I have explained this well enough and somebody is able to help ...

 

Many Thanks,

Ali

Hi Ali,

 

The problem is off course because of margin-right: 75px

270 X 3 = 810

75 X 3 = 225

 

Total it becomes 1035px and the parent container width is 960px;

 

so, if you decrease the margin-right from 75px to 50px it will come in 3 columns.

 

Thanks,

 

Gopal Juneja

 

 

 

 

 

Hey Guys,

 

The problem can be seen here: http://collossalpixel.com/portfolio/

 

Each .porfolio-item is brought in through Wordpress via PHP. This means that there are multiple Divs with the same class but with different content inside.

 

What I am trying to do, is equally spread out 3 Divs on each 'row' so to speak.

 

Dimensions are shown below.

 

.p-wrap {

width: 960px;

}

 

.portfolio-item {

width: 270px;

float: left;

margin-right: 75px;

}

 

I have floated each .portfolio-item left and then added in a margin-right of 75 to produce the gap.

 

This works well for the first 2 elements, but the third is forced down to the 2nd 'row' because it does not fit onto the line. Putting in the margin-ritight was the only way I could think of to get that spacing between each element.

 

Obviously this hasn't worked.

 

I have provided an image as well to try and help explain the situation. All can be clearly seen using Firebug in FF.

 

Image can be found here: http://www.collossal...xplanartion.jpg

 

Hopefully I have explained this well enough and somebody is able to help ...

 

Many Thanks,

Ali