Fill div with divs with auto margins (CSS) - css

Question

I bet this question is asked several times before, but I can't find an answer. Not here or google. I guess that says alot of my front end- (and searching?-) skills.
So apologies for an expected already answered post.
My problem is how ever that I have a div on 980 pixels that I want to fill with other smaller divs. Lets say that the smaller divs are 180 pixels wide, and that i have 7 of them. Then it should be 2 rows of small divs with 20 pixels beween them and it should be 5 on the first row and 2 on the next row.
One way is to set them to float: left and have a margin-left: 20px. This would how ever end up in a total row with of 1000px (20 to wide) wich will result in 4 divs on the first row and 3 on the second.
One try was to set a margin-right:-20px on the container, but it did (not that unexpected) not work.
Any help or links to answers will be welcome!
EDIT:
I realized i was not really clear in my question. The container will also be rezisable, so the smaller divs should just fill the space in the container with the first on the row 0px from left and the last on the row will be 0px from right. The divs in between should just autofit. I have only found stuff like this for one row problems. I would then also prefer if it broke the row 'til next line if the margins between the smaller divs are < 1 pixel.
EDIT 2:
I made a jsfiddle to my problem. The green boxes should autofill the gray area (horizontally, the vertical margin can be a given value, like 15/20 px).
http://jsfiddle.net/yfnpv/

Answer 1

It's difficult to tell exactly want you want.
If I understand you right, it's this.
demo
I have added some helper elements :
....
<div class="obj">7</div>
<div class="obj push"></div>
<div class="obj push"></div>
<div class="pushend"></div>
</div>
and the CSS is :
#container {
max-width: 980px;
background-color: gray;
display: inline-block;
text-align: justify;
}
.obj {
width: 180px;
height: 180px;
background-color: green;
display: inline-block;
}
.obj.push {
height: 0px
}
.pushend {
width: 100%;
height: 0px;
display: inline-block;
}
The idea is not mine, but I can't just find the place where i saw it.
I believe that the original author also used some clever trick with pseudo-elements, just to not change the HTML, but I can't exactly remember.

Answer 2

<div id="container">
<div class="1column first">one column</div>
<div class="1column">one column</div>
<div class="1column">one column</div>
<div class="1column last">one column</div>
<div class="clear"></div>
<div class="1column first">one column</div>
<div class="1column">one column</div>
<div class="1column">one column</div>
<div class="1column last">one column</div>
</div> <!-- container -->
The CSS
#container {width: 630px;}
.1column {width: 150px; float: left; margin-left: 5px; margin-right: 5px;}
.first {margin-left: 0px;}
.last {margin-right: 0px;}
.clear {clear:both;}
In order to make sure everything fits properly, you have to add the width of the smaller div + its margin values to get a total div value and then add that to the others.
So for the first div, its total width should be 155px (150px + 5px), the next should be 160px (150px + 5px + 5px). So if you have the first and last div's 155px and two other divs 160px, your total width should now be 630px.
To make a break to form another row, you would add a clear:both div in between. This clears all floats, left or right, and moves to the next line. Then you can repeat.
The 5px margins would make a 10px margin between each smaller div (5px + 5px).
This is just a broad example. You can have different size divs (you should Google css grid frameworks), you will learn a lot about how these systems are set up. They're essentially the same as what I did but go further than this.
What ever you do, just make sure that the inner divs don't go beyond the "container" divs width or you will run into problems. Remember, padding + margin + width + borders = total width. So even adding a simple 1px border to any div will automatically increase it by 2px (1px on left 1 px on the right).
Edit: then if you wanted to center align the whole thing, you would add to the container div in the CSS
#container {width: 630px; margin-left: auto; margin-right: auto;}
I hope this helps.