Question

I have a container div with a fix height defined. This div contains two child divs, which should have an margin to as well the borders of the container as the other child. While the first child should expand to fit its content the second one should fill up the container and display scroll bars if necessary.

This is how a working example could look:

This works great by using absolute positioning on both childs, but it requires a fixed height for the first child (“header” in the example above). Whenever the first child expands the second one would of course overlap it.

See jsfiddle instances small header and large header for example code.

Do you have any idea how to design this in a way the margins still apply no matter how large the header grows?

Thanks in advance!

Answer 1

You have a few options:

• Limit the length of the headers so they are always 1 line (using text-overflow)
• Use Javascript to change the height of the content minus the height of the header.
• Use a server side language to calculate the titles length and adjust the content
• Have the entire content area scroll so the header may not always be visible.

Personally I like the limiting the length of the headers and just hiding the overflow, but thats not always an option.