Put same DIV twice on same row with space between them

Question

I want to put the same div twice on the same row and cover all of its width and I need to put some space between them both.

The problem is when I use margin it will affect them both since they have same class so the second div will go below the other because the total width will become bigger than the container width.

I tried to use overflow:hidden or overflow-x:hidden with margin or change their size but nothing changed.(also I've tried to use borders with overflow hidden)

I am forced to use many div from the same class and I need them to cover all the width of the row.

Edit: the code is big so I will post a small example to explain my question

<div class="container">
    <div class="block">content...</div>
    <div class="block">content...</div>
</div>

<style>
.container{width:1000px; margin:0px auto;}
.block{width:480px;height:500px;float:left;}
</style>

I want to put first block + 40px space + second block

Answer 1

If you want the two .block divs on the same row what I would do is not do it in pixels but with %'s.

For example what I would do is this:

Give your div that you want on the right an id of right and the one that you want on the left an id of left:

<div class="container">
<div class="block" id="right">content...</div>
<div class="block" id="left">content...</div>
</div>

Then I would style it with

<style>
.container{width:1000px; margin:0px auto;}
.block{width:48%;height:500px;display:inline;}
#left{float:left;}
#right{float:right;}
</style>

You can play around with the exact width percent to get it to your standards.

Answer 2

You might want to make give them different class names or ids if you want to manipulate the two of them different.

<div class="container">
<div class="block1">content...</div>
<div class="block1">content...</div>
</div>

You can use inline display to make them appear in the same row.

.block1, block2 {
display: inline;
}

From there you can style them how you want by selecting either of those classes.

Answer 3

Could this be something like you're after?

http://jsfiddle.net/justin_thomas/9S46N/

The CSS:

.myRow {
   width:48em;
}
.myclass {
   padding: 1em;
   margin-left:1em;
   margin-right:1em;
   float: left;
   display:inline;
   width: 20em;
}

The HTML:

<div class="myRow">
  <div class="myClass">Blah... blah...</div> 
  <div class="myClass">Blah... blah...</div> 
</div>

In there, i've used floats to get the desired effect. Unfortunately this means you have a hard time if you can't specify the actual width of the row's container in physical units (or one of its parents) and you also need to know whe number of columns there will be in this row to use as the width amount in the class with the divs.

I don't really like this as as solution as you need to make sure that the sum of each (div width + left-margin + right-margin) is never larger than the width of the row container.