CSS Float Left with marginal separation

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>

Answers


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!


Need Your Help

mantisBT plugin GaugeSupport Error #1111: Invalid use of group function

php mysql group-by mantis

I use mantisBT 1.2.19 for a bug tracking project http://mantisbt.org/download.php.

Android volley library, where to use and where not to

android android-asynctask android-volley

As our typical old asynctask network connection is getting replaced by volley. It's fast as I have used so I know. I downloaded images and showed. When I again restarted the app it didn't take time...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.