I need help to get my divs to align properly

[lestrope]

Hello. First let me thank you for your time and help ahead of time. Any insight will be greatly appreciated.

I have a site set up here: www.nemesisproject.com/sisemenproject/index_dev.html

I am trying to get the left and right background images to line up with the center background image, which scales to screen resolution based off width. The height of the left, center, and right divs are all set to the same height. The images are all set to the same height as well. Still, the left and right appear to not line up as they should.

CSS can be found here:
http://www.nemesisproject.com/sisemenproject/cashmoney/ss/main.css

Regards,
Me

[lestrope]

*Update*

I got the top edges to line up using margin: 0;

I've applied this to the site so the updates should be visible. I still have an issue getting the bottom edges to line up. Can anyone tell me what I should be doing?

Thanks.

[MidiMagic]

If you want bottom edges to align, use either absolute sizing or a table.

This is one failure of the div method. Divs size themselves to sontents, not surroundings.

One thing to remember is to not put size defining objects or values in the same div with surrounding styles (margins, borders, and padding). Instead, nest them in the order you want them to appear. Set margins, borders, and padding to 0 in size-defining divs with an appropriate class. This removes the differences between IE and FF.

[lestrope]

If you want bottom edges to align, use either absolute sizing or a table.

This is one failure of the div method. Divs size themselves to sontents, not surroundings.

One thing to remember is to not put size defining objects or values in the same div with surrounding styles (margins, borders, and padding). Instead, nest them in the order you want them to appear. Set margins, borders, and padding to 0 in size-defining divs with an appropriate class. This removes the differences between IE and FF.

Thank you for the advice. Will you allow me to see if I understand, and correct me if wrong? In regards to your mentioning of not putting size defining objects in the same div with surrounding styles.... So if my right column div has surrounding styles, I should not put an image that I need aligned in that element? Does this apply to nested elements? Meaning that if I can't put my image in the right column div, can I put my image within a div within the right column div?

I'm sorry if I seem so naive. I have read a lot of CSS sources and I turn to this as a last resort. I really appreciate your help.

Cheers,

[MidiMagic]

Yes. Nest them in the order you want the parts to fit inside each other.

I just thought of something else. You may be inadvertently trying to change the aspect ratio of the image by specifying both a width and a height. The browser ordinarily will not allow that. It forces the aspect ratio to be correct by ignoring one of the specifications.

[lestrope]

Thank you very much. I'll see what I can accomplish by removing the width specification from the center DIV. My CSS is 50% what I wanted and 50% tweaks to get the desired affects. I know it's sloppy but I threw form out the window when I started having to deal with all these issues.

I'll post an update when I make some progress. Thank you for your help.