跨瀏覽器浮動框

我有以下代碼，但我不確定如何調整它，以便在中心框的左右兩側有兩個框，其中在框的監視器端約有20px margin，而在兩個框之間有一個10 to 15px margin框。跨瀏覽器浮動框

我也似乎無法讓他們在一條直線上對齊。我知道我目前只有一個左邊的方框。

的jsfiddle：

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"> 
        <a href="http://www.twitter.com" title="Follow me on Twitter"></a> 
       </div> 

     </div> 
    <div id="portfolio"> 
     <h3>Portfolio</h3> 
     <ul> 
      <li><a href="#">Text</a></li> 
     </ul> 

     </div>

來源

2012-03-27 Jess McKenzie