Absolute position height and bottom element

I have absolute positioned div, which of course doesn't have height, so bottom elem开发者_C百科ents(in HTML hierarchy) doesn't have proper position in page.

here is link: [removed]

Absolute positioned div is in #page-wrapper.

Problem: I need that #red-bottom(body child) element goes to bottom of page.

I can give #page-wrapper(also body child) fixed height, or set fixed margins. But problem is that, that text can be shorter or longer. So height also dynamic.

So how fix this for all cases(dynamic)?

Fixed by JavaScript.

So how fix this for all cases(dynamic)?

You have two options:

• Use JavaScript to position the red bar.
• Don't use absolute positioning to position elements on your page.

There is no way to move the red bar always to the bottom using CSS if the amount of text varies.

It's perfectly possible to achieve the same layout without using absolute positioning.

Read: http://www.htmldog.com/guides/cssadvanced/layout/

Old question but wanted to post a non-javascript answer. Using absolute layout and specificying the top/right/bottom/left attributes, it is indeed possible to create layouts that consist of headers, sidebars, main sections, and footers without any javascript. If you check out the online bookmarking tool zootool.com and get a free account there, you can see a live example of a layout done like this (if you want to prove that it's possible). Check the source of their page you'll see they are doing something very much like this.

A layout similar to iTunes is extremely easy to create using just CSS with absolute positioning. It also works for resizing of the screen, if you assume you have a sidebar that will always have the same width.

It's very common to have a header, sidebar, main, and footer in apps - but if you have something more complex, this method may become more hassle than it's worth and a javascript solution may be better.