Menu
Consider the basic HTML below:
<body>
Random HTML content
<div class="container">
<!--Some content loaded via ajax or the like -->
</div>
Other random HTML content
</body>
I want the width of the "container" div to be the MAXIMUM of three potential values:
I have been able to accomplish #1 and #2 by using the CSS properties width:100% and min-width:1024px. I can also accomplish #2 and #3 by setting display:inline-block and min-width:1024px. However, I haven't been able to get all three: if I add in the width:100% to the display and min-width properties, it overrides the child content sizing effect of the inline-block display and gives me only 100% width, even when that means the content overflows.
I know I can hide overflow or give the div itself scrollbars, but what I want is for the div to expand as needed, or to the full width of the window, whichever is greater - but never narrower than 1024px.
Edit: Note that the content loaded in the div may be less than 1024px. The div itself, however, should never be less than that, as it would no longer blend nicely with the look and feel of the rest of the page.
777
You can achieve this by adding another div on top of first one:
<div class="container2">
<div class="container">
</div>
</div>
css:
.container2{min-width:100%; display:inline-block;}
.container{min-width:1024px; width:100%;}
http://jsfiddle.net/om10t3gn/4/
172
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
