Geek Answers Handbook

Why does the minimum width and maximum width work as I expect?

I am trying to customize the layout of a CSS page using min-width and max-width. To simplify the problem, I made this test page. I am testing it 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 is what I expect :

  • When the browser maximizes, divs sit side by side, each 400px wide: their maximum width
  • Shorten the browser window and they both shrink to 200 pixels: their minimum width
  • Further browser reduction does not affect them.

This actually happens starting from step 2:

  • Shorten the browser window, and as soon as they cannot sit side by side with maximum width, the second div falls below the first
  • Further shortening the browser makes them narrower and narrower, as small as I can make the window

So here are my questions:

  • What does max-width mean if an element is more likely to accumulate in the layout than to fall below its maximum width?
  • What does min-width mean if the element is smoothed, if the browser window shrinks?
  • Is there a way to achieve what I want: do these elements sit side by side, happily shrink until they reach 200 pixels each, and only then adjust the layout so that the second falls down?

And of course...

What am I doing wrong?

+6
css
source share
3 answers

The reason they are "reset" is due to the resizing of their parent element (in this case, body ). Place around them a wrapper div with a width of 400 pixels or more, and you can keep them sitting next to each other.

+1
source share

I think (and this is only from my personal experience) that max-width applies to content inside a div. Therefore, if the div had only 1 word, the width would be 200px, but if the div had 300 words, the width would be 400px wide.

I think there is a way to do what you want to do. This article may apply to her:

http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/

Good luck.

+1
source share

To answer at least a little:

min-width valid when the browser should show a horizontal scroll bar for the page.

While experimenting with floats really works very well when they have a width set, so I would use a parent div with a minimum width and add width: 50% to the child divs. This solves all your problems except partitioning. For this, I would probably refer to javascript.

 <!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.cont {max-width: 700px; min-width: 400px;} div.a, div.b {float: left; width: 50%; } div.a{background: orange;} div.b{background: gray;} </style> </head> <body> <div class="cont"> <div class="a"> Morbi malesuada nulla nec purus convallis consequat... </div> <div class="b"> Vivamus id mollis quam. Morbi ac commodo nulla... </div> </div> </body> </html>
+1
source share

More articles:


All Articles