min-width take precedence over max-width?

Question

Is there a way to have the child div start with the defined min-width and then as I add content to that child div, the div will expand till it reaches the max-width? As is, the child div automatically starts out with its max width. jsfiddle: http://jsfiddle.net/QMf22/ css: ``` #main{ width:500px; min-height:250px; background-color: #33363b; border-radius: 10px; margin: 1% auto; overflow: hidden; } #content{ min-width: 237.5px; max-width:490px; min-height: 237.5px; background-color: white; margin: 1% auto; border-radius: 10px; position: relative; cursor: pointer; } ``` html: ```

```

Accepted Answer

`

` is a block element, and it will wrap it's width equal to it's parent, so your elements won't get the `min-width` nor `max-width` style if the parent container width is bigger or smaller then what you set respectively. to make the element width depend on the content, you need to use an `inline` element or change the CSS `display` for the `div` to an `inline` element, using ``` display: inline-block ``` here's the updated FIDDLE UPDATE if you want to make it in the center, just add CSS ``` text-align: center; ``` inside it's container ( `#main` in your case ), here's the example in FIDDLE

min-width take precedence over max-width?

Solution

Problem