Question: I have a layout that looks like this:

```
.-------------------.u
|#content           |u
'-------------------'u
.-------------------.u
|#menu              |u
'-------------------'u
.-------------------.u
|#morecontent       vu
|                   vu
|                   vu
'-------------------'u

```

`u`'s represent the body scrollbar and `v`'s the one created from `#morecontent`'s `overflow: auto` property. I have `#menu` contain dynamic data so sometimes it takes more than one line but right now `#morecontent` is sized to fit only one. How can I make the height of `#morecontent` adjust itself so it doesn't cause the `u` scrollbar to be scrollable or "enabled". I guess when I have more than one line? I know I should be using `%`'s and I tried using `max-height` but it didn't really work the way I wanted...

Answer: 
Make sure that your div uses only max-height and min-height. Do not use height.
If you want its height to go forever, don't set anything.
Use `position: fixed` to make the layout more concrete and Javascript to resize the #morecontent div. There is no way to make it resize when the other div does with XHTML/CSS.