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?
