Div to increase width with content automatically with content

I have a DIV that contains all my form items, however all rows in my form are not uniform as some have links to datepickers, etc... after the textbox, select menu, etc... 开发者_开发百科anyway if I set the main container width to a set amount (450px) items wrap (IE only). So I tried setting the width to min-with and now in Chrome and IE my container DIV stretches the whole width of the page.

here's my css...

#form_container{min-width:450px;background:#e0c0c0;-webkit-border-radius: 10px;-moz-border-radius:  10px;border-radius:10px;padding:10px;}

Anyone know how I can overcome this?

Thanks

You could put a container around your form with the maximum width that you want to allow your elements to go, and then give it either overflow: auto if you want the elements to wrap if they are too long, overflow: hidden if you want the elements to disappear if they are too long, or overflow: scroll if you want there to be a horizontal scrollbar added if they are too long.

Try this:

#form_container 
{
  display: table-cell;
  min-width:450px;
  white-space:nowrap;
}

In this case container will have intrinsic width of its content (white-space:nowrap; display: table-cell;)