Margin between two boxes in CSS - html

Question

First, I'm a newbie on front-end development. I just want to hear about possible "professional" solutions of my problem from professionals.
Now, firstly check out this fiddle: http://jsfiddle.net/SB7yR/
Here is what I want: create two boxes on each row. I can't do that right here because I want to make margin between two boxes too.
I have solutions for that situation for example create a class like "last" and give it margin-right: 0; then apply it last boxes for each row. But I don't want to do that. It sounds .. hmm.. an amateur solution.
Thanks for advices.

Answer 1

You can add a text-align: justify; to .addresses and remove the margin-right on address_box.
.addresses {
margin-top: 30px;
text-align: justify;
}
also, you should use a class for .addresses #address-box instead of an ID. ID's are supposed to be unique on a page, so only one element is allowed to have a particular ID. Use this instead .addresses .address-box.

Answer 2

Try below code:-
.addresses #address-box {
height: 123px;
width: 298px;
border-color: black;
border-style: solid;
border-width: 1px;
float:left;
margin-right: 20px;
}
#address-box:nth-child(2n) {
margin-right:0;
}

Answer 3

My suggestion would be to make a class for all boxes (assuming each box would be the same size), then float all the boxes left. You would then make the width (in actual physical size or percentage) to be less than the width of the containing div. This would accomplish you having two boxes in each row. Hope this helps.
.box{ float:left; width:48%; margin-right:5px; }
Something like that. Experiment with the margin right amount.

Answer 4

for cross browser compatibility, how about an additional html element:
http://jsfiddle.net/SB7yR/8/
html:
<div id="addresses-wrap">
<div class="addresses">
<div class="overflow">
<div id="address-box"></div>
<div id="address-box"></div>
<div id="address-box"></div>
<div id="address-box"></div>
<div id="address-box"></div>
</div>
</div>
</div>
css:
#addresses-wrap {
width: 620px;
height: auto;
border:1px solid green;
overflow:hidden;
}
.addresses {
width:100%;
float:left;
margin-top: 30px;
}
.addresses .overflow {
width:650px;
overflow:hidden;
}
.addresses #address-box {
height: 123px;
width: 298px;
border:1px solid #000;
float:left;
margin:0 20px 20px 0;
}

Answer 5

You'll need to use a float to make this work. Try replacing your .addresses #address-box definition with the following:
.addresses #address-box {
height: 123px;
width: 288px;
border-color: black;
border-style: solid;
border-width: 1px;
display: inline-block;
margin: 10px;
overflow: hidden;
float: left;
}