0

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">
                    <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>            ​
Jess McKenzie
  • 8,345
  • 27
  • 100
  • 170

1 Answers1

1

Are you trying to achieve this?

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

Ahmad Alfy
  • 13,107
  • 6
  • 65
  • 99
  • jzm.co.nz is what I currently have I am trying to align the 3 boxes in the middle so they are all equal – Jess McKenzie Mar 27 '12 at 19:28
  • K I see 2 boxes and they are perfectly aligned and they have equal height (on FF and Chrome at least!) What is the issue? – Ahmad Alfy Mar 27 '12 at 19:33
  • Hey, I have updated my website I am wanting it like portfolio middle content. How would I also cross browser vertical center it? – Jess McKenzie Mar 27 '12 at 19:59
  • look at the answer for this question http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen to vertically center anything – Ahmad Alfy Mar 27 '12 at 23:07