Cross Browser Float Boxes - html

Question

I have the following code but I am unsure how I would adjust it so that I have 2x boxes left and right of the center box with about 20px margin on the monitor side of the boxes and a 10 to 15px margin in between the boxes.
I also cannot seem to get them aligned in a straight line. I am aware I only have one left box at the moment.
jsFiddle:
http://jsfiddle.net/qY6BT/
CSS:
body{
background-repeat:repeat;
background-image:url('../images/bg.jpg');
}
h1{
text-align:center;
color:#8f4988;
}
.bold{
font-weight: bold;
}
a{
font-weight: bold;
color:#8f4988;
}
p{
margin: 5px 25px 0 25px;
text-align:left;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#wrapper{
margin:8% auto;
background-color:#e3e3e3;
border-radius:5px;
width:550px;
min-height:350px;
}
#logo{
width:150px;
margin:0 auto;
padding:10px 0 10px 0;
}
#socialMedia{
float:right;
width:205px;
height:64px;
margin:10px 0 0 0;
}
#socialMedia p {
float:left;
margin:0 auto;
}
#socialMedia .twitter{
width:49px;
height:64px;
background:url('../images/twittericon.png') no-repeat;
}
#socialMedia .facebook{
width:49px;
height:64px;
background:url('../images/facebookicon.png') no-repeat;
}
#socialMedia .linkedin{
width:49px;
height:64px;
background:url('../images/linkedinicon.png') no-repeat;
}
#portfolio{
height:350px;
width:350px;
margin:-452px 0 0 5px;
background-color:#e3e3e3;
border-radius:5px;
}
#portfolio h3{
padding:15px 0 10px 0;
text-align: center;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#portfolio li{
text-align: center;
padding:0 0 15px 0;
}
#portfolio li a{
font-weight: normal;
color:#000;
text-decoration: none;
}​
HTML:
<div id="wrapper">
<div id="logo">
<img src="_assets/images/logo.png" alt="Logo">
</div>
<h1>H1</h1>
<div class="paragraphContent">
<p>Content</p>
<br/><br/>
<p>
Regards,
</p>
<p class="bold">Name</p>
</div>
<div id="socialMedia">
</div>
</div>
<div id="portfolio">
<h3>Portfolio</h3>
<ul>
<li>Text</li>
</ul>
</div> ​

Answer 1

Are you trying to achieve this?
http://jsfiddle.net/qY6BT/1/