DIV Aligning Problem

[AeroCoder]

The scheduled launch of the new version of my website has been delayed for a couple reasons... and one of the major reasons, which I can't seem to get around, is the totally messed up DIV boxes I've set up.Here's the page in question: http://www.cemrin.com/testing/index2.htmOnce you open up the page, look near the very bottom and you'll find a couple boxes (Project News, Latest News, etc), and you will also see that they are on the bottom obviously, which is my problem. I've tried everything in my CSS to make them align to right of far right of the page so that it is inline with the paragraph instead of below it. I would also like to have the DIV boxes "stacked" upon each other...This is my CSS Stylesheet used for the page:

div.container{width:100%;margin: auto;line-height:145%;background-image: url('container_content2.png');background-repeat: no-repeat;}div.header{padding:0.5em;color:white;background-color: #CEDCEC;/* background-image: url('stylewave2_hover2.png'); */background-repeat: no-repeat;clear:left;}div.footer{padding:1.5em;background-image: url('container_footer.png');clear:left;}div.footer a{color: #003366;font-family: "Microsoft Sans Serif";font-size: 12px;font-style: normal;text-decoration: none;}div.footer a:hover{color: #336699;font-family: "Microsoft Sans Serif";font-size: 12px;font-style: normal;text-decoration: underline;}div.left{float:left;width:160px;margin:0;padding:1em;}div.content{margin-right:290px;border-left:1px solid #999999;padding:1em;background-image: url('bg_overlay2.png')}div.right{float:right;clear: both;width:680px;margin:0;padding:1em;}

The boxes are all contained in a DIV container class called "div.right". Can anyone help me with this? I appreciate it very much.

[ste]

hi AeroCoder, you have the following css applied to the div "right" float:right; clear: both;get rid of the clear both & instead clear the float in the footer

[AeroCoder]

Well, I've tried what you suggested -- clearing the footer, right, left, and both, but they don't move one inch.This is the modified CSS I have right now:

div.container{width:100%;margin: auto;line-height:145%;background-color: #FEFEFF;background-image: url('stylewave2.png');background-repeat: no-repeat;}div.header{padding:0.5em;color:white;background-color: #CEDCEC;background-repeat: no-repeat;clear:left;}div.footer{padding:1.5em;background-image: url('container_footer.png');clear: both;}div.left{float:left;width:160px;margin:0;padding:1em;}div.content{margin-right:290px;border-left:1px solid #999999;padding:1em;background-image: url('bg_overlay2.png')}div.right{float: right;width:180px;margin:0;padding:1em;}

Am I not doing something correctly?

[Kevin M]

I think you need to add in position: relative; for floated areas to work in IE at least, not sure about FF though. This probably isn't the answer, but maybe give it a try...

[AeroCoder]

Didn't work either... Thanks for the help.

[packrat]

Here are a couple links to some tutorial that helped me a great deal in adopting CSS layout techniques:http://www.csszengarden.com/http://css.maxdesign.com.au/floatutorial/index.htmHaving credited my help resources I'll say that you'll probably want to consider some structural changes in your HTML, the Zen Garden site will give some great insights. I'll not dally into a great amount of detail on this, suffice it to say that the paragraph tag is causing you some headaches. Nothing is telling it to take less than the full available width; Floating the block below it has no effect as is there is no room for it to push up into. A couple of quick fixes to get you started:option #1: move your 'right' block above the paragraph tag but below the h2 tag.option #2: give your paragraph tag a fixed width and tell it to float left.From a SEO perspective option 2 is closer to the correct answer; the articles should help shed some light on why.Another resource: this one is a fun tutorial on "Why tables for layout is stupid"http://www.hotdesign.com/seybold/index.htmllet me know how it goes.