<DIV> boxes overlapping when adding a third - html

Question

First of all. I´m kind of a rookie when it comes to coding webdesign. Last time I made a website was 20 years ago, and I can say that a lot has happened :-)
To the topic. I´m trying to create a couple of boxes in . I want them all to stay in the middle with a Little space between them.
They need to go down in a row like this:
[] []
[] []
My problem is that when i add my third and fourth they overlap the top boxes!
Link to code on fiddle:
http://jsfiddle.net/2cZtH/7/ enter code here

Answer 1

Here you go. http://jsfiddle.net/2cZtH/8/
You shouldn't really be using position:absolute for this ideally, that takes them out of the DOM and you have to position them all manually. You can give them a width of a % of the containing div and float them left for the same effect with much more ease. :)
div { width:25%; float:left; border-radius: 25px; margin-right:2.5%;
border: 2px solid #A9B8C2;
padding: 20px;
height: 200px;
background: #ECECEC; }
Edit: Of course you can use a set width if you know the width of the containing div.

Answer 2

See the fiddle
Your HTML code had many problems which made it to malfunction.I have changed your code a little. See below for the changed code. Please replace your HTML with this one.
The main problem with your CSS was that you was using position:absolute; which made it look like that. So i've changed that to position:relative.
You can read more about CSS positioning here..
HTML
<div class="container">
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead"> Alger i våra kar</span>
<br /><br/>
<span class="fulldivp"> En artikel som beskriver ingående de vanligaste algerna i våra akvarier. Med många bra bilder tillsammans med Beskrivning/Orsak/Bekämpning gör denna artikel till
förmodligen den mest omfattande på webben.
<br/><br/>
</span>
</a>
</p>
</div>
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead">De vanligaste växtbristerna</span>
<br /><br/>
<span class="fulldivp">
<br/><br/>
</span>
</a>
</p>
</div>
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead">De vanligaste växtbristerna</span>
<br /><br/>
<span class="fulldivp">
<br/><br/>
</span>
</a>
</p>
</div>
</div>

Answer 3

I struggled to understand your code, is this something you are trying to create
http://jsfiddle.net/2cZtH/11/
I created a simple box that is repeated. Using display:inline-block; stacks them in order and causes a line break when it reaches the end of the viewport.
If you are just trying to create three columns using float:left is all you need.
http://jsfiddle.net/2cZtH/15/

Answer 4

Problem solved! By making the right box relative and edit margin-right plus margin-top. Plus link in clear after code. Thanks!

Answer 5

You could put them in a table:
<table>
<tr>
<td>
Top Left Content
</td>
<td>
Top Right Content
</td>
</tr>
<tr>
<td>
Bottom Left Content (Blank)
</td>
<td>
Bottom Right Content
</td>
</tr>
</table>
Put your divs in the table cells, and remove their absolute positioning property as this will prevent the table cells from sizing properly.