If I have a div with a set height with a table inside...

i.e.



Then obviously (in this case) the table isn't going to reach the bottom of the div.

If I stick another div below the table is it possible to get the inside div to position at the bottom of the main div?

I tried using float...


but that floats at the bottom of the enitre page.

I'd like something like float but so that it floats at the bottom of the div (if that makes sense?).

Do both these divs have the capacity to consent?

Outer div = div1
Inner div = div2

Why are you placing div2 inside div1 if you want it to display below?

As a "I don't know what's wrong, lets click through all the buttons to see if one of them fixes it" type solution, have you tried specifying "clear:both" in the CSS for div2?

Basically, no. Sone more explanation of the problem might be able to produce a solution, but I have had some wine!

I don't want it below div1 I want it at tue bottom of div1. I.e. The bottom of div2 is just inside the bottom of div1.

Float the table and div two. Float both left (or right) and both clear both. Give the table and div two the same width as div 1.

That would make them appear after each other though. If you want the second div to appear at the bottom of your first div, I'm not sure it's possible. You'd have to give it a margin or padding, but that will only work if you know the height your first table is always going to be.

Googling float bottom, which I'm sure you've done, yields lots of people in the same boat and not many answers. If this is to do with the PDF thing you were talking about before, absolute positioning might work.

Yeah, in the end I went a completely different route.

The document page has a repeating header and footer. These can be positioned absolutely.

The only stuff that "flows" is the content of the main table (i.e. the lines of the invoice etc...). The table HAS to be positioned relatively or it won't flow from page to page.

In the end I defined the margins of the page (something our HTML -> PDF converter uses) to be the size of the content.

This meant I could just create a table in the page and have it flow.

Once that was done I could then just position everything else absolutely.

So, I now place the footer div (div2 above) after the table in div1 but position it absolutely. This means it will only appear after the table has finished (i.e. on the last page) and I can then position it outside the defined page size.

Web wise it's a complete mess but in terms of the document format it works perfectly. It means I can change the header with affecting anything in the content. I can move the content around by just altering a couple of numbers etc...

I'm a bit of an HTML noob also which doesn't help. I'm finally getting to grips with it though.

Also, because I am doing it in XSL and XML it means I can define a "master" XSL file which will define the main parts of the document (header, content, footer) and place the basics in them.

Then, if someone wants an altered version (for one of our companies) then we can include the master XSL and override any parts that need changing.

So the layout only has to be done once.

Very handy just a lot of work to get there.

If it works, it works. It's nice to do it the "right" way, but I learnt long ago with Photoshop, there are a million different ways of getting the right result and it's the result you're after.