Search code examples
htmlpositionheight

One static height div and 2 flexible height divs inside container

I'm creating a small chat for my site.

<div id="container">
    <div id="user"></div>
    <div id="chat"></div>
    <div id="chatform"></div>
</div>

What my end result should look like is something like this: http://jsfiddle.net/XXHTC/2/

This is pretty easy when I know the height of the user div. However, the user div does not have a known height, it expands and shrinks as users log on and off.

The chatform at the bottom has a known height, so I can set position absolute and bottom: "height of chatform div" to it's height so the chat does not overlap it.

How can i set the "top" value of chat relative to the user div as it expands/shrinks. Don't want the user div to hide anything in the chat div.

Solution

  • You'll need to use JavaScript to determine the height of div#user and then set the top position of div#chat equal to that height.

    Demo