Margin between two boxes in CSS

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.