Boxen nebeneinander springen!

[lddd]

Hallo,

ich würde gerne Boxen mit fester Größe innerhalb eines Containers 700px positionieren nebeneinander mit einem jeweiligen Abstand zwischen den Boxen (20px). Dabei sollen immer zwei Boxen nebeneinander floaten und dann die nächsten 2 darunter usw...

Die Boxen sollten außerdem noch einen Border von 1 px solid haben.

Nun habe Ich also:

#wrapper { width: 700px }
#box { float:left;width:326px;height:200px;margin: 0 20px 0 0; border:1 px solid #333;}

Das Problem was Ich habe ist entweder springt die 2. Box in die nächste Zeile oder ist rechts nichts randlos/bündig bis Ende des Containers.

Hab schon ziemlich viel ausprobiert mit Margin und auch Selektor für first-child etc, aber irgendwie bekomm ich es nicht hin.

 

[ka9de]

Wenn du einen rechten Abstand festlegst, wie soll die Box dann auch bündig bis an den rechten Rand laufen?

 

[lddd]

Ja und wenn ich links ne margin setzte dann ist es links nicht bündig? ...

 

[prm]

So sollte es klappen:

#wrapper { width: 700px;}
.boxleft { float:left;width:338px;height:200px; border:1px solid #333;}
.boxright { margin-left: 360px; width:338px; height:200px; border:1px solid #333;}

<div id="wrapper">

div class="boxleft">
boxleft
</div>

<div class="boxright">
boxright
</div>

</div>

Danach clearen und das gleiche mit den Boxen wiederholen.