Question

When dealing with data driven content whereby we do not know the number of elements that will be generated:

Each element should float:left and sit side by side until they make a row before making another one.

I want some separation between each element. If I apply MARGIN or PADDING it will effect the elements at the end too. What I want is a separation of a certain number of pixels between each element in a row.

For example:

.container {
   width:1000px;
}
.bubble {
   width:240px; height:200px; margin-right:10px;
}
<div class="container">
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
</div>

Answer 1

This is a trick I usually use when I run into stuff like that.

.container {
    margin: -10px 0 0 -10px;
}
.bubble {
    margin: 10px 0 0 10px;
}

This will offset the container and the boxes will follow. If you don’t apply any more style to the div actually wrapping the items (in this case .bubble) the user won’t see it and you will have your perfect grid with margins and all!