0

I have a resizable (using jQuery UI) div with 2 elements: ul on top and input on the bottom. The input element has fixed height. I would like both elements to resize horizontally along with the resizable container (that's easy - width: 100%) and vertically with the input height fixed. What that means is the input element should always have the same height and stick to the bottom of the container and only the ul element above it to stretch/shrink in height. Is this somehow possible with CSS?

EDIT:

Sample code is here: http://jsfiddle.net/dxtVy/ but it doesn't work there for some reason. It should give an idea of how it works though.

Waynn Lue
  • 11,344
  • 8
  • 51
  • 76
krojew
  • 1,297
  • 15
  • 38

1 Answers1

0

There is no "float:bottom" in css but you can do this:

Give "position:relative" to your "container" div, and then "position:absolute;bottom:0;" to your "input".

BTW, I took it from Stackoverflow question

Community
  • 1
  • 1
Sergey
  • 19,487
  • 13
  • 44
  • 68
  • That only solves the input element being at the bottom. ul would not be stretched to fit the new height. – krojew Jan 25 '12 at 11:41
  • @Sergey Hi, I just came across your profile. Can you please look into this? http://stackoverflow.com/questions/14539384/changing-a-static-speech-bubble-into-a-click-drag-resize-writable-version – aVC Jan 26 '13 at 17:21