Need help with arranging a layout...

I am trying to do pure CSS layout with words, images and bg image. But I can't seem to get it. The layout for the first 2 images seem fine, then when I tried to add the 3rd image, it pushed it down...

Desired final layout

Invidual image pieces

The ugly turnout currently

CSS code here...

/*--------------- BEGIN WHITE CONTENT BOX ------------------*/	
div.box {
	width: 350px;
	height: 190px;
	background: url("splash/white_bg.gif") no-repeat;
	margin: 20px;
}	

div.box div {
	padding: 10px;
}

div.box h1 {
		font-size:120%;
		font-family: "Trebuchet MS", Arial, Tahoma, Verdana;
		border-bottom: solid 1px #cccccc;
		margin: 0 0 5px 0;
		}

div.box p.content {
	text-align: center;
	margin-top: -80px;
}

span.read, span.journal, span.share, span.more {
	display:block;
  width:60px;
  height:75px;
	}

span.read {
	float:left;
	margin-right:5px;
	background: url("splash/read.gif") no-repeat;
	}

span.journal {
	background: url("splash/journal.gif") no-repeat -50% -2%;
	}

span.share {
	background: url("splash/share.gif") no-repeat;
	}
	
span.more {
	background: url("splash/more.gif") no-repeat;
	}

span.read span, span.journal span, span.share span, span.more span {
	display:none;
	}
	
/*------------END WHITE CONTENT BOX ------------------*/

HTML code here...

		<div class="box">
			<div>
				<h1>Lorem ipsum dolor</h1>
				<span class="read"><span>Read Views</span></span>
				<span class="journal"><span>Journal Views</span></span>
				<span class="share"><span>Share Views</span></span>
				<span class="more"><span>And More...</span></span>
				<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean blandit, leo ut vehicula elementum, dui nulla elementum lectus.</p>
			</div>
		</div>