This new question is in relation to my previous one: How to position relative elements after absolute elements
I have updated the JsFiddle from that question to better represent my current HTML, which I unfortunately do not have a URL for at the moment. You can view the updated version here: http://jsfiddle.net/dkxUX/22/
Upon further inspection, I have encountered some issues with this layout.
In the comments on o.v.'s answer, it was suggested that I create additional wrappers, such as a #header div. This could be a good solution as it would allow me to still position elements absolutely within it, as long as it is positioned anything other than static.
However, I have now hit a roadblock:
I am wondering whether the height of an absolutely positioned element will impact the height of its parent container. After some experimentation, it appears that it does not: http://jsfiddle.net/qFh6s/1/
Feeling frustrated, I tried using jQuery: http://jsfiddle.net/WD6LF/1/
The result? Even more frustration and running out of ideas.
I am struggling to assign fixed heights to these elements because their content varies.
At this point, I find myself getting annoyed by the structure of my HTML, especially the additional wrappers needed for the sticky footer which seem less semantic to me. Additionally, I am starting to realize that simply putting everything in divs and positioning them absolutely is not always the best approach to solving CSS challenges. I am open to any helpful suggestions and prepared to start over from scratch if necessary.