Menu
I have following problem:
I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use min-width and max-width in CSS, but it seems that min-width is not working. The width of div is always the max-width value, no matter what the content is.
Example:
I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I gave the form style max-width:500px to show that even if content is small, the main div stays the same.
HTML
<div class="gInnerBox sInnerBoxMain"> <form style="max-width:500px; margin-left: auto; margin-right: auto"> <div id='content'> <!-- CONTENT --> </div> </form> </div> CSS
.gInnerBox{ position: relative; background-color: #fff; opacity: 0.9; padding: 10px 10px 10px 10px; box-shadow: -5px -5px 20px #000, 5px 5px 20px #000; -moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000; -webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000; border: 1px solid #000; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; } .sInnerBoxMain{ max-width: 1000px; min-width: 500px; margin-left: auto; margin-right: auto; top: 50px; } 
(source: wstaw.org)
571
Try setting display: inline-block on the element and see if that helps you out any. This should make it only expand as far as its content while still paying attention to the minimum and maximum widths. You may have to add a breaker <br /> after to make the rest of your content adapts to it being inline.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration. Authors may use any of the length values as long as they are a positive value.
By default, a block-level element will expand to fill as much width as possible. So its width is basically "100%" (sort of) and you're saying a maximum of 1000px, so it's expanding to the maximum of 1000px. The minimum width is still being achieved (it's at least 500px). Try setting display: inline-block on the element and see if that helps you out any. This should make it only expand as far as its content while still paying attention to the minimum and maximum widths. You may have to add a breaker <br /> after to make the rest of your content adapts to it being inline.
155
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
