Why aren't min-width and max-width working as I expect?
- by Nathan Long
I'm trying to adjust a CSS page layout using min-width and max-width. To simplify the problem, I made this test page. I'm trying it out in the latest versions of Firefox and Chrome with the same results.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
div{float: left; max-width: 400px; min-width: 200px;}
div.a{background: orange;}
div.b{background: gray;}
</style>
</head>
<body>
<div class="a">
(Giant block of filler text here)
</div>
<div class="b">
(Giant block of filler text here)
</div>
</body>
</html>
Here's what I expect to happen:
With the browser maximized, the divs sit side by side, each 400px wide: their maximum width
Shrink the browser window, and they both shrink to 200px: their minimum width
Further shrinking the browser has no effect on them
Here's what actually happens, starting at step 2:
Shrink the browser window, and as soon as they can't sit side-by-side at their max width, the second div drops below the first
Further shrinking the browser makes them get narrower and narrower, as small as I can make the window
So here's are my questions:
What does max-width mean if the element will sooner hop down in the layout than go lower than its maximum width?
What does min-width mean if the element will happily get narrower than that if the browser window keeps shrinking?
Is there any way to achieve what I want: have these elements sit side-by-side, happily shrinking until they reach 200px each, and only then adjust the layout so that the second one drops down?
And of course...
What am I doing wrong?
