Menu
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:
Here's what actually happens, starting at step 2:
So here's are my questions:
max-width mean if the element will sooner hop down in the layout than go lower than its maximum width?min-width mean if the element will happily get narrower than that if the browser window keeps shrinking?And of course...
What am I doing wrong?
606
The reason they're "dropping down" is due to the changing size of their parent element (in this case body). Put a wrapper div around them with a width of 400 pixels or more and you can keep them sitting side-by-side.
103
I think (and this is just from my own personal experience), that max-width applies to the content inside the div. So if there was only 1 word inside the div, it would be 200px wide but if there were 300 words in a div, the width would be 400px wide.
I think there is a way to do what you want to do. This article might relate to it:
http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/
Good luck.
29
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
