Need help with complex absolute & relative positioning…

[meenainc]

Guys, I stumbled upon Chris’s article about relative and absolute positioning and have read a few other resources, but I cannot seem to find the answer to my current problem.

Currently, I have the following layout:

<div id="wrapper"> (width of 100%)
<div id="content_wrap"> **width:980px; **
<div id="header"> (width:950px; margin:0 auto;) </div>
<div id="container"> ** position:relative **
<div id="page_content"> ** position:absolute: width:695px; z-index:99; top:0; left:0;**
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div><!– #page_content –>
<div id="rightcol"></div> ** position:absolute; width:300px; z-index:3; top:25px; left:680px; **
</div> <!– END #container –>
</div> <!– END #content_wrap –>
<div id="footer"></div>
</div> <!– END #wrapper –>

Essentially, I want the div "page_container" to appear on top of (hover I guess) the "rightcol" div. I have the "rightcol" div set to appear 25px down from the top of the "container" div and 680px from the left of it as well. I did this to have "page_container" overlap "rightcol" due to some PNG transparent images I am using.

PROBLEM: The div id"footer" is showing up directly under the "content_wrap" div. Like it is ignoring the "header" and "container" div’s all together, eventhough I have those two set at relative positions.

QUESTION: Is there a way to "clear" the positioning before the "footer" div? What am I missing here?

Thanks ya’ll!
Chris

[AshtonSanders]

Probably the best way to do it is to use a sticky footer to absolute position your footer to the bottom of the page…

[meenainc]

xheathen, Thank you for the reply. That would work but the footer div needs to be 100% wide and not inside the container div… sorry I did not mention that in the OP.

[meenainc]

I take it this positioning problem is not fixable with valid CSS? Ok…guess it is time for That CSS guy ad I saw here on the site…lol.

I will still check this forum to see if a solution has been found, but in the mean time, I have to get this fixed. Thanks for the help guys!

[AshtonSanders]

"meenainc" wrote:

I take it this positioning problem is not fixable with valid CSS?

Sticky Footer is valid CSS, and it’s very easy to make the footer 100% wide… Just make a container Div that is 100% wide.

Did you read through any of the ways to make a sticky footer? Learning the how will make it easy to do what you want to do with it.

[meenainc]

Ashton, yes I did read how to make a sticky, but thanks for the sarcastic question. Instead of valid CSS I should have said, "settle for making a design change."

The sticky footer does not work like you suggest even when moved outside of the "wrapper" div as the "wrapper" div is not expanding in height for some reason. Using Inspect Element in FF when you scroll over the "wrapper" div, it only shows that it is as tall as the "header" div, even though every other div is inside of it.

My solution was to forgo the positioning and "float above" all together and make a minor design change. I still want to find a solution to this.

[AshtonSanders]

"meenainc" wrote:

Ashton, yes I did read how to make a sticky, but thanks for the sarcastic question. Instead of valid CSS I should have said, "settle for making a design change."

I’m sorry if it read as sarcastic. Your valid css comment made it sound like you hadn’t read it, so I had to ask.

"meenainc" wrote:

The sticky footer does not work like you suggest even when moved outside of the "wrapper" div as the "wrapper" div is not expanding in height for some reason.

I’m not totally sure what you mean, but this, but there is nothing specific to Sticky Footer that demands the footer to be a certain width. If you go to that page and use Firebug to remove the width from the #wrapper and #footer, the footer is 100%.

This may mean that you will need to update your markup to have another Div inside the wrapper that keeps your text from being 100% (or adding a new wrapper outside your existing content, etc.) Does that make sense?

[Author]

Posts