Question

I seem to be having a problem stacking 3 divs side by side. I’ve went through a few different pages that gave me codes and tips for how to do this but for some reason it doesn’t come out right. Here is the div code I am using in my page, and the info for the divs from the style sheet. Hoping someone can help me out with a fix to what I am doing wrong.

I decided to make another edit because I really didnt give enough info, I have 3 divs side by side but they seem to stick together and one is different, I want them to evenly space to fit flush with the rest of the layout. I have a link to the site so you can see what I have what I have

Also sorry about the mix up with the # missing from the #t2 on the post I accidentally deleted it when making the post its in the code.

<div id="testwrap">
    <div id="t1">left</div>
    <div id="t3">right</div>
    <div id="t2">middle</div>
</div>

#testwrap {
width: 933px;
margin-right: auto;
margin-left: auto;
}

#t1 {
width: 311px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
height: 220px;
margin-top: 20px;
margin-bottom: 20px;
float: left; width:311px;
padding: 10px;
}
 #t2 {
background-color: #FFF;
height: 220px;
width: auto;
padding: 10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
#t3 {
background-color: #FFF;
height: 220px;
width: 311px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 20px;
width:311px;
float: right; width:311px;
padding: 10px;
}

Answer 1

Here’s a clean working code (Your code is so messy). You can copy paste this to your HTML document. Just change the background color of the divs to your liking.

http://jsfiddle.net/K3FJe/

HTML

<div id="testwrap">
    <div id="t1">left</div>
    <div id="t2">middle</div>
    <div id="t3">right</div>
</div>​

CSS

#testwrap {
    width: 933px;
    height: 280px;
    margin: 0 auto;
    background: black;
}

#t1, #t2, #t3 {
    height: 220px;
    padding: 10px;
    color: #FFF;
    float: left;
}

#t1 {
    width: 273px;
    margin: 20px 6px 20px 12px;
    background-color: red;

}

#t2 {
    width: 279px;
    margin: 20px 6px 20px 6px;
    background-color: blue;
}

#t3 {
    width: 273px;
    margin: 20px 12px 20px 6px;
    background-color: green;
}​

I updated it with even spaces between them, I think this should work.