Jump to content

DIV Aligning Problem


Recommended Posts

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. :)

Link to post
Share on other sites

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

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...