new/featured Columnar layout help

[MattDownUnder]

Having the same problem.
I got rid of everything in the right column so my shop has only left column and products. Everything works fine but on the "home" page the "New Products for October" should have 3 colums. It only shows 2 images and wraps the third image in a new line.

Changing the margins in the css did not help.

Any thoughts

Matt

[seethrou]

Somethings should be notice for the width of the Columnar layout.

At first, the cells in the columns are divided and depended on the defines in admin.
If the define are:
set to 2 then each cell's width is 50%, set to 3 then each cell's width is 33.3%, set to 4 then each cell's width si 25%, ...

But those widths are different than orthers. When adding style to those cells or some unknow factors in the page will "add overhead" to those widths. Thus the total values of the width will be more than 100%. And this cause insufficient width for the last cells to sit inside the same row and it just drop to next row.

When found that the last cells are droped to the next row, or a style added to the cells and caused the cells droped to next row.

The followings in stylesheet may help. It can be solved by some compensations, is to reduce the widths of the cells and by adding negative values to the margins. And the negative values must be more than the sufficient.

For example in the following, borders are added to the cells and in normal conditions the last cells will drop to next row for sure.
But if sufficient negative values are added to the margins, then the last cells will not drop.

/* Index Page, Center Box Contents */
.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents {
	border-top: 3px solid #E7E7E7;
	border-left: 3px solid #E7E7E7;
	margin-left: -4px; 
}

Note: in above
1. for added a 3 px border-left to the cell, therefore need a sufficient negative values of -4px or more to reduce the overhead and from the margin.

2. For don't want to display all the cells as un-uniform and ugly boxes, therefore only the border-top and border-left are added.


And to style the item names /titles inside the cell, also some cares are needed. It is link text and combined with the images.
May try the follwoing:

/* Item names /titles of Index Page, Center Box Contents */
.centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .specialsListBoxContents a {
	display: block;  /* override previous style */  
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
}

.centerBoxContentsNew br, .centerBoxContentsFeatured br, .centerBoxContentsSpecials br, .specialsListBoxContents br {
	line-height: 0;  /* override the height of display: block above */
}

Hope this helps.

[MattDownUnder]

Your da man.

I added:
/* Index Page, Center Box Contents */
.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents {

margin-left: -11px;
}

to the css and it works it worked from -9 on and I just thought I'll make it a bit more.

I did not get the meaning of the second code. In my case it might be text that is too long so it won't fit in the cell.

Thanks so much for your detailed answer

Matt

[seethrou]

I did not get the meaning of the second code. In my case it might be text that is too long so it won't fit in the cell.

Thanks so much for your detailed answer

Matt

I also had thought about it.

The second code is for styling the paddings of left and right and centering of the Product Name.
For the time being, it may be the best result I can achieve. I can tell, since v1.3.x, I had tried and tried and this was the last minute effort.

[seethrou]

Your da man.

I added:
/* Index Page, Center Box Contents */
.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents {

margin-left: -11px;
}

to the css and it works it worked from -9 on and I just thought I'll make it a bit more.

For better result and for the cetnering, the negative value should be reduced from both of the left and right margins.
For your case, it should better be

margin-left: -6px;  /* use 6px only for no 5.5px */
margin-right: -6px;  /* use 6px only for no 5.5px */