What techniques are there for creating a products grid that has padding between each item, but only within the grid? For example, what I am trying to achieve is the below:
Sample markup:
<div id="container">
<div class="item">
<!-- content -->
</div>
</div>
CSS:
#container { width: 100%; min-width: 960px; }
.item { float: left; width: 300px; height: 100px; }
(in the above, .item
is going to be output 9 times).
The solution would need to be IE8+ compatible and preferably using a technique that isn't a hack. I have tried using display: table
with border-spacing
property - but this outputs the padding on the outer sides too.
I know I can also add specific classes to items to control whether the padding is shown for that item, but I was hoping for a more 'automated' solution.
Edit: The padding width should be calculated dynamically, so for example if the container is 960px, the padding is going to be 30px wide.
Secondly, if there are less than 3 items on the last row, these should not appear centered on the row, i.e. if there are only two items then the last 'cell' should just be empty.
EDIT: All the solutions so far insist on specfying the width of the gap/padding. I want to have the padding calculated dynamically. The only width I need to specify is that of .item
, which is currently a fixed with of 300px.
I have somewhat of a solution, but it's not exactly what you're looking for, because I don't think what you want can be done without a solution that makes use of :nth-child (either natively or with a JS polyfill).
Take a look at my sample: http://jsfiddle.net/ncA64/1/
I've built product grids just like this many times. It gives you a fixed margin of 30px around each tile, and the width of each tile flexes to accommodate the width of the parent.
Code, for reference. HTML:
and CSS:
I thought I'd throw in a quick responsive example for usage in Bootstrap.
Using Bootstrap's grid system, the following CSS will remove any margin on the outer touching columns of a 3-column (per row) grid:
Keep in mind that columns already have left and right padding applied by bootstrap (
15px
worth). So if this is not the desired amount, override it in the first style rule of the above css snippet.DEMO | CODE
NOTE: I know OP didn't ask for bootstrap, specifically. I just wanted to provide a simple way to do is using bootstrap for fun :)
Responsive grid with :
DEMO
elements widths + left/right magins = 100%;
overflow:hidden;
This is simple and doesn't use any properties unsuported by IE8. I am pretty sure it can have a decent output in IE7 if you remove the borders and the box-sizing property.
Just to make sure, negative margins are not a "hack" :
HTML :
CSS :
After, you just need to change the width of the
.items
with media query to rearange the number of elements in one row on the desired breakpoints.Example :
text-align: justify
for the container anddisplay:inline-block
for the items with no float (it float anyway... it's inline now).Simple, responsive and works on lot of older browsers
EDIT: Forgot to say "and a additional div, to clear at the end, also display-inline, but 100% width"
http://jsfiddle.net/qFEB7/1/
Test this code:
Please don't consider this a formal answer. Josh's is clearly elegant.
I like these types of questions because it gives me an opportunity to think of a variety of ways to approach a problem. I've used tables and floated divs to give a total of 4 other ways to do this. If I can think of any more, I'll add them.
The FIDDLE.
The first table in HTML, just to fulfill the SO requirements.
HTML
"Tables are inelegant" -(except for tabular data)