I always have a problem trying to figure out the best way to make expandable content boxes. I used to use tables and cut the box into sections (top, bottom, left and right – then each corner in a table cell too, with an expandable middle cell for the content) This worked flawlessy on all browsers but its generally frowned upon.
Today i have an image which i need need to only expand vertically. however it has a drop shadow and the top 200 pixels or so has a gradient. Heres a link to the image im working with.
http://imageshack.us/photo/my-images/16/brandinfobox.png/
The content needs to flow and the div needs to expand vertically as the content grows. Ive looked at a few approaches but ive either not been successful or they have just not worked in some browsers. The main problem is the drop and shadow and top gradient. Those stop me from using a base background then absolute positioning some divs inside as the background ruins the drop shadow when i absolute position the outer edges.
Any advice? Sure its fairly simple if you know your way around css
I would add a linear-gradient in CSS3.
For the surrounding rounded box with drop shadow, whether I go for 100% CSS3 or two background images and an extra div would depend of the requirements of my client.