This example demonstrates how to set a minimum width and a maximum width of an element using a pixel value.
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 200px; outline:1px red solid; } p { max-width: 500px; min-width: 200px; background-color: yellow; } </style> <body> <div>This box is 200 pixels wide</div> <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> </body> |
This box is 200 pixels wide
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. |
The paragraph is displayed to a maximum of 500 pixels wide. If you resize the browser's window to less than the 200 pixel wide mark, a scroll bar will appear at the bottom of the window. The paragraph will not resize to under 200 pixels wide.
