Im learning html/css and I really need some help to achieve what you can see on the image.

So far Ive created the html side, but I've been around the css without good results.
Please have a look: Thanks for your time
- Code: Select all
<div class="main">
<div class="image"><div class="about">
<div class="abouttop">
<div class="abouttopimg"><img src="http://www.freeimagehosting.net/uploads/70b79a8111.jpg" alt="about me" width="100" height="100" /></div>
<div class="abouttoptxt">
<p>First part</p>
<p>of text goes here</p>
<p>side to side </p>
<p>with the image</p>
</div>
<!--abouttoptxt-->
</div>
<!--abouttop-->
<div class="aboutmetxt">
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>sit voluptatem accusantium doloremque lau</p>
<p>dantium, totam rem aperiam, eaque ipsa quae</p>
<p>voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>rem aperiam.</p>
<p>sit voluptatem accusantium doloremque lau</p>
<p>sit voluptatem accusantium doloremque lau.</p>
</div>
<!--aboutmetxt-->
<div class="cb"></div>
<!--Do not Delete It. It is used to maintain height-->
</div></div>
</div>
<div align="center">
<table align="center" cellpadding="8" cellspacing="8" >
<tr>
<td><a href="#" title="First square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Second square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Third square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Fourth square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
</tr>
</table>
</div>


