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
-
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.
-
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. :smile:
