Question

I have problem with css, I make html layout and need to get bluebox sit on the bottom above searchbox, and if there is a content above the bluebox then the bluebox will go down so there is a gap beetwen bluebox and content above. But if there is no content the bluebox will sit on the bottom above the searchbox.

you can see the html here:

http://projects.elixirbox.com/lanrex/test.html

you can see what I mean here – http://projects.elixirbox.com/lanrex/view.png

Thanks

Answer 1

I think you need to use a “sticky-footer” technique, using negative margins. The only down side you footer (or in your case Call to Action-box) need to have a fixed height.

If you need dynamic height you need to involve javascript. But use the same sticky-footer css with some default height and later just adjust it with JS so it’s not just pure JS.

https://gist.github.com/1855032
or
http://ryanfait.com/sticky-footer/