CODEWITHSUNDEEP
htmlcss
Chipe
Chipe

Reputation: 4801

min-width take precedence over max-width?

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:

<div id="main">
    <div id="content"></div>
</div>

Upvotes: 4

Views: 1798

Answers (2)

Kyojimaru
Kyojimaru

Reputation: 2724

<div> 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

Upvotes: 3

crowhill
crowhill

Reputation: 2548

http://jsfiddle.net/5S9Nt/

try adding 

#content{
    float: left;
}

To the content div.

display: inline-block;

Would also work. The trick is, the element has to be set to inline somehow.

There are other options, depending on what you want the inner div to look like. Javascript could dynamically force the div (and it's content) to whatever you like.

Media queries might also be useful? The description of the problem is pretty vague.

@media (max-width: 600px) {}

Upvotes: 0

Related Questions