Place four divs in a wrapper, only 1 shows itself
===

I'm trying to create a wrapper with in it 4 divs next to each other (two next to each other and below them the remaining two). However the problem is, is that only the fourth one is showing itself. I've tried setting the overflow: hidden, toy with the display property and also tried to use float:left and float:right. Yet so far no luck.

This is the css I'm using:

    html, body{
    width: 100%;
    height: 100%;
    }
    
    #wrapper{
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    }
    
    #one{
    background-color: red;
    width: 50%;
    position: absolute;
    height: 50%;
    }
    
    #two{
    background-color: green;
    width: 50%;
    position: absolute;
    height: 50%;
    }
    
    #three{
    background-color:blue;
    width: 50%;
    position: absolute;
    height: 50%;
    }
    
    #four{
    background-color: yellow;
    width: 50%;
    position: absolute;
    height: 50%;
    }

and this is the html code that goes with it:

    <html><head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    </head><body>
    <div id="wrapper">
    	<div id="one">a</div>
    	<div id="two">b</div>
    	<div id="three">c</div>
    	<div id="four">d</div>
    </div>
    </body></html>

Can anyone figure out why the yellow (four) div is the only one showing itself, even if I let it float right and others left? (Besides I'm also wondering why there are scrollbars appearing because of the width: 100% and height: 100% in the html,body part.)


