creating div with fixed width and flexible height

Question

I'm trying to create a div which will have fixed width and flexible height , here is the picture which I want to use for background. The thing is when I have div larger than image height the bottom rounded corners are omitted and also if I have div less than the size of image same thing, how do I make this work with round corners with all sizes? Thank you

Answer 1

Position the background image at the bottom -add some padding to bottom of the div so the corners will fit into that. Make the bg image really tall.

Answer 2

Using background-position will ensure you always have rounded corners:

CSS:

background-position:bottom;

You'll have to create an image that has a lot of extra height so that if the div does end up being taller than expected, you've always got room to play with.

Another option would be to divide the div into 2 separate divs - 1 as the main content section, the other just adding the curved corners to the bottom. This will allow you to use a 1px high background image for the main div, and a 20px(ish) image for the curved border image, reducing the file size quite a bit. I've attached an example for you: Download Example

Answer 3

Just use a bottom of your image, others with border style.

<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;">
         <div id="myContent" style="border: 1px solid #ccc; border-bottom:none;">
          Some Content
         </div> 
    </div>

If you need a round borders at the top, simply add style "background" to #myContent with top align and another image.