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>
<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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With