max-width
property is used to set the maximum width of an element.The
max-width
can be specified in length values, like px, cm, etc., or in percent (%) of the
containing block, or set to none (this is
default. Means that there is no maximum width).The problem with the
<div>
above occurs when the browser window is smaller than the width of
the element (500px). The browser then adds a horizontal scrollbar to the page.Using
max-width
instead, in this situation, will improve the browser's handling of small windows.Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!
This element has a height of 100 pixels and a max-width of 500 pixels.
Note: The value of the max-width
property overrides width
.The following example shows a
<div>
element with a height of 100 pixels and a
max-width of 500 pixels:Example
div {
max-width: 500px;
height:
100px;
background-color: powderblue;}
No comments:
Post a Comment