CSS max-width – limit maximum wodth of an element

CSS max-width property is used to set maximum width of a box element. Few points to note about max-width

  • It cannot be negative.
  • If max-width is less that min-width, then min-width value overrides it.

CSS property max-width

CSS version: CSS 2.1
Value: length | percentage | none | inherit
Initial: none
Applies to: all elements but non-replaced inline elements, table rows, and row groups
Inherited: no

Example – max-width pixel value

<style type="text/css">
.box {
  max-width: 100px;
  height:100px;
  background-color: lightgreen;
}
</style>

<div class="box">
This is some text where max width will not exceed 100px
</div>
refresh

Example – max-width pecentage value

<style type="text/css">
.outer {
  width: 300px;
  height:100px;
  background-color: lightgray;
}
.box {
  max-width: 50%;
  height: 100px;
  background-color: lightgreen;
}
</style>
<div class="outer">
  <div class="box">
    This is some text where max width will not exceed 50%
  </div>
</div>
refresh

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments