CSS min-width – set minimum width of an element

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

  • It cannot be negative.
  • If min-width is greater than max-width or width, then min-width value overrides them.

CSS property min-width

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

Example – min-width pixel value

<style type="text/css">
.box {
  min-width: 200px;
  width: 10px; /* will be overridden */
  max-width:10px; /* will be overridden */
  height:100px;
  background-color: lightgreen;
}
</style>

<div class="box">
min width 100px
</div>
refresh

Example – min-width pecentage value

<style type="text/css">
.outer {
  width: 300px; height:100px;
  background-color: lightgray;
}
.box {
  min-width: 50%;
  width: 0; /* will be overridden */
  height: 100px;
  background-color: lightgreen;
}
</style>
<div class="outer">
  <div class="box">
    min width 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