Question

Ok, so I really don’t know if it’s possible but I believe that must be a work around as always! What I want to achieve:

got something like:

<div id="one">
   HEADER pph content...
</div>

<div id="two">
   BOTTOM php content...
</div>

<div id="three">
   BODY php content...
</div>

I what to place the div number two beneath the (auto-size) div number three!

The problem is that the div number two gets generated first. than div number three and I can’t get it to work as I want…

Appreciated your help.
Regards.

Answer 1

wrap all three divs in a relatively positioned div, then you can absolutely position the "bottom" div at the bottom, it will work better if you are able to approximate the height of the bottom div so you can apply the same amount of padding to the bottom of the wrapper to create space for it

CSS:

#wrapper {
  width: 700px; 
  margin: 0 auto; 
  background: #eee; 
  position: relative;
  padding-bottom: 5em;
}

#two {
  position: absolute;
  bottom: 0;
  left: 5%;
  background: #ffe;
  width: 90%;
  height: 5em;
}

HTML:

<div id="wrapper">
<div id="one">
   HEADER pph content...
</div>
<div id="two">
   BOTTOM php content...
</div>
<div id="three">
   BODY php content...
</div>
</div>

---

Update re: comments

Here’s a version that doesn’t need any heights or bottom padding, only works if nothing follows the "footer"

I put it in a jsfiddle, so you can tweak

JSFiddle Example: HERE

with this version #two is still absolutely positioned but rather than guess at the height it becomes a 1px high placeholder, the actual content will then overflow below #two and therefore the main content – #three – you need to ensure div#two (footer) has a child div inside it, again just add it into your php template, then you can style it as you wish, it should take a min-height if you still need that, but this way should just work, if you need white-space below this for any reason you would add padding-bottom to the body element e.g.

body {padding-bottom: 10em;}

this div (#two) is no longer "contained" in the wrapper element, though it still needs it to take it’s position from

---