-2

I want to place a DIV at the bottom of its containing DIV. The solution I've used seems a bit tricky.

First of all, my component drops to the very bottom of the page, not the bottom of its parent. Second of all, I worry that if I fill out the space inside the parent DIV, something will be overwritten and look ugly in the future.

So, the question is if it's the best recommended way to place a child DIV at the bottom of its parent DIV. And if not, what's a better way?

Community
  • 1
  • 1
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • 2
    Please do provide the code you have so far. If the
    isn't following it's parent container it sounds like you haven't followed the answer you linked to in full: the parent container needs to have `position: relative` for it to work.
     – Etheryte Jun 05 '14 at 19:02
  • @Nit It doesn't really matter because of the worry I mention in the question. The question is not about **placing** the *DIV* at the bottom. It's about doing so **correctly**. – Konrad Viltersten Jun 05 '14 at 19:09
  • 1
    As markup isn't too strict there isn't generally a one-above-all correct way to do something. Your solution depends on your expected behavior, should the div always be at the bottom of the parent or should it behave like a [sticky footer](http://www.cssstickyfooter.com/)? – Etheryte Jun 05 '14 at 19:14
  • @Nit Umm... I don't see anything at the bottom of the page you linked to... :$ Also, please be careful not to introduce grammatical errors in the question. – Konrad Viltersten Jun 05 '14 at 19:20
  • The site footer is at the bottom of the page. But that aside, it would be easier (or rather, possible) to answer your question if you could explain which of the above described two behaviors you're after. Simply positioning a
    at the bottom of it's parent?
     – Etheryte Jun 05 '14 at 19:22
  • @Nit AH, now I see the sticky footer. It wasn't there before. Weird... – Konrad Viltersten Jun 05 '14 at 19:27

1 Answers1

1

This can be done very easily with jQuery:

$("#child").css({"position" : "absolute", 
  "top" : $("#child").parent().height() - $("#child").height()});

Fiddle.

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
cohenadair
  • 2,072
  • 1
  • 22
  • 38
  • A completely unnecessary use of scripting. – Etheryte Jun 05 '14 at 19:13
  • Maybe, but it's easy, clean, and works. – cohenadair Jun 05 '14 at 19:14
  • As can easily demonstrated this solution is what's often referred to as _fragile_: it completely breaks upon smaller site logic changes, something that should be avoided if at all possible. For example see [this Jsfiddle](http://jsfiddle.net/vL8fw/). – Etheryte Jun 05 '14 at 19:19
  • Seeing as this is marked as the accepted answer, anyone looking for a _good_ solution should refer to the question linked to in the opening question. – Etheryte Jun 05 '14 at 19:29
  • I can see how that could be a problem, but depending on what the person is doing it might not matter. And if one does run into issues, they can be easily compensated for. I prefer using jQuery over CSS at times simply because I run into a lot of unexpected behaviour working with CSS, which is likely due to lack of knowledge. At times, I just find jQuery easier to work with. No need to be hostile. :) – cohenadair Jun 05 '14 at 19:35