Please help with two CSS positioning issues?
I'm in the beginning stages of revising a page. Here's the link.
Problem #1: If you look at the site in Firefox you'll see what the collapsable divs are supposed to look like. In Internet Explorer I was shocked to discover how horribly it didn't even come close. I guess this disaster came from the way I used CSS to position the left and right content.
.communities_left {position: absolute;
top: 110px;
left: 10px;
width: 600px;
border-right: 2px solid #000;
padding-right: 10px;
background: #fff;
text-align: justify;
color: #000;
font-style: normal;
font-weight: normal;
text-decoration: none;
font-size: 16px;
font-family: Arial,Verdana,sans-serif;}
.communities_right {position: absolute;
top: 110px;
left: 640px;
padding-right: 5px;
background: #fff;
text-align: left;
color: #000;
font-style: normal;
font-weight: normal;
text-decoration: none;
font-size: 12px;
font-family: Arial,Verdana,sans-serif;}It works in Firefox, not blowing the page out right, but IE... kaboom! What is "the right way" to position content like I wanted, where the left side was a fixed width and the right side was left undertermined (not even via %)and able to flex to the browser.
Problem #2: In either browser, please look directly underneath the menu iitems at the top header. It's hard to see but you should be able to sneak a small glimps of my footer file between the left and right content, just to the right of that vertical black line. That stuff should be along the very bottom of the page but because I put my left and right content in divs with positioning, the page thinks I don't have any content and the footer ends up directly below the header. So related to question #1, how do I position left and right content with div positioning and still have my footer at the bottom? The footer is not placed by CSS right now, just the fill page table that I use for the layout. Click here to see the original page with the footer at the very bottom of the page.
Thanks for the guidance!
Abhishek Reddy posted this at 02:48 — 11th January 2005.
He has: 3,348 posts
Joined: Jul 2001
- Avoid underscores in class/ID names.
- Use left and width to arrange the left, fixed-width box.
- Use left and right to arrange the right, flexy box. Using right pins the side of the box relative to the right border of the window and the box widens to consolidate the extra space.
Have a loot at bluerobot.com and alistapart.com for more ways.
fifeclub posted this at 03:03 — 11th January 2005.
He has: 688 posts
Joined: Feb 2001
Thanks. I'll take a look at those momentarily.
As a side question related to this, how do I embed a div within a div with positioning? I thought that if you absolute position an element inside another div then it will be absolute positioning compared to the upper left corner of the div it's embedded within. But a simple attempt proves I'm wrong. But since I thought something like that existed, am I close to some other method that makes absolute position be absolute of the outer dive and not the browser window?
Thanks
fifeclub posted this at 03:29 — 11th January 2005.
He has: 688 posts
Joined: Feb 2001
Never mind about that last question. I found the answer. ONLY if the container div is RELATIVE then the innre absolutely positioned div will be 'relative' to the containing div.
So given this fact, couldn't I make one big full screen container and then just put my left and right divs within it? I'll try it soon but I'll still take any advice that is offered.
Abhishek Reddy posted this at 03:36 — 11th January 2005.
He has: 3,348 posts
Joined: Jul 2001
You could indeed. That's one of the many ways to do it.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.