Поперечные браузерные поплавки

Question

У меня есть следующий код, но я не уверен, как бы я его отрегулировал так, чтобы у меня было 2x прямоугольника слева и справа от центрального прямоугольника с примерно 20px margin на стороне мониторов боксов и 10 to 15px margin междукоробки.

Я тоже не могу выровнять их по прямой линии.Я знаю, что в данный момент у меня есть только одна левая коробка.

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">
                    <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>            ​

Answer 1

Вы пытаетесь достичь этого?

http://jsfiddle.net/qY6BT/1/