vertical expand content boxes - html

Question

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

Answer 1

May be you can do like this for this type of image & gradient
http://jsfiddle.net/wh6r4/
edit: added CSS code
.content{
background: url(http://i.imgur.com/5hN1S.png) repeat-y top left;
width:647px;
min-height:300px;
position:relative;
margin:50px;
}
.y-repeat{
position:absolute;
left:2px;
right:7px;
top:0;
bottom:0;
background: url(http://i.imgur.com/bJmR4.png) repeat-x top left;
}
.top, .bottom{
background: url(http://img16.imageshack.us/img16/3301/brandinfobox.png) no-repeat 0 0;
height:20px;
width:100%;
position:absolute;
left:0;
}
.top{
top:-20px;
}
.bottom{
background-position:left bottom;
bottom:-20px;
}

Answer 2

If that box can have a min-height than here are some ex. how to do it:
<div id="box-top"> // CSS bg image = 600*8px with rounded corners
<div id="box-middle"> // CSS bg image = 5*80px vertical tiny gradient line ; min-height!
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners
OR EVEN BETTER:
You can make expand a gradient image inside the middle DIV, by setting position:absolute, width 100% and height:100% !!
<div id="box-top"> // CSS bg image = 600*8px with rounded corners
<div id="box-middle">
<img class="box_mid_img" src="vertical_gradient_image.png"> // CSS: .box_mid_img width:100%; height:100%; position:absolute
</div>
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners
Another trick is to simply use a CSS3, you'll get support for IE gradients but not for shadows and corner (border) radius.
http://jsbin.com/uberub/2/edit#javascript,html,live

Answer 3

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.

Answer 4

I would split the image into three horizontal strips. One for the top, including the rounded corners, one for the bottom, including corners and shadow, and one very thin strip for the middle.
Then with markup like this:
<div style='background-image: url("middle.png"); width: 400px;'>
<img src='top.png'>
Expanding content in the middle
...
Can be as big as you like
<img src='bottom.png'>
</div>