Question

I am trying to get a div to be centered AND to have a minimum-width of 630px. It should expand in width based on the size of the content.

---

For some reason it is taking up the full width of the page even though I have:

1. centered all content

2. set all divs within it to 600px width

3. have placed test content in it thats not so wide

---

Here are the relevant bits: http://jsfiddle.net/partisanentity/7KGRr/2/

The issue seems to be #imageholder ?

Answer 1

You can display:inline-block to your #content DIV. Write like this:

body{
    text-align:center;
}

#content {
    clear:both;
    min-width:630px;
    padding:15px;
    display:inline-block;
    *display:inline;/*For IE7*/
    *zoom:1;
    text-align:left;
    background-color:#5b5b5b;
    margin-top:15px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

Check this http://jsfiddle.net/7KGRr/3/