Aligning problem

Here is the location of the problem: http://www.insanecombat.com/Wow/

How can I fix it?

Here is the CSS:

Code:

---

#container {
        margin: 0 auto;
        margin-top: 20px;
        text-align: left;
        width: 900px;
}

#content1 {
        background: url(images/elf-bg.jpg) no-repeat 2px;
        clear: both;
        display: block;
        height: 450px;
        padding-left: 128px;
        padding-top: 38px;
        width: 770px;
        text-align: center;
}

#footer {
        background: url(images/footer-bg.jpg) no-repeat;
        clear: both;
        color: #F1D6AC;
        display: block;
        height: 99px;
        padding-top: 20px;
        text-align: center;
        width: 900px;
        text-align: center;
}

#header {
        background: url(images/header-bg.jpg) no-repeat;
        display: block;
        height: 14px;
        width: 897px;
        text-align: center;
}

#left {
        background: url(images/btm-left-bg.gif) no-repeat;
        display: block;
        float: left;
        height: 494px;
        width: 556px;
}

#pagebottom {
        clear: both;
        width: 900px;
        text-align: center;
}

---

Any answer will be helpful, thx

Hahah, what's the problem?

each of the divs are a little crooked, the sides do not go straight down =(

your background images are all different sizes.

what does that matter, i changed the width with the css?

Take out all the alignment attributes for the divs inside the container. the container should make them all line up automatically.

Like Blue said. Make sure your images are all the same width. CSS will NOT change the size of your images for you! Even if it did it would make them look very messy.

I dont know about you but it would bug the crap out of me to have different widths. Just make it neat!! Good luck with your endeavors.