saftutorials.com
CSS MAX MIN WIDTH-HEIGHT Tutorial

CSS Max Width and Height Declare in a div or any HTML tag maximum width and height. And CSS Min Width and Height Declare in a div or any HTML tag Minimum Width and Height.

The different of Max Width into the only Width that, Max Width declare only maximum width it's not a fixed width it will be changed if his condition will be changed like max-width:100px; it not longer than 100px; but Width declare a fixed width like width: 100px; It's fixed only 100px;


Example of CSS Max Width and Height

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .safdiv1{
      height: 40px;
      max-width: 50%;
      max-height: 200px;
      border:3px solid red;
      float: left;
    }
  </style>
</head>
<body>
  <div class="safdiv1"></div>
</body>
</html>

Output:



The different of Min Width into the only Width that, Min Width declare only minimum width it's not a fixed width it will be changed if his condition will be changed like min-width:100px; it not smaller than 100px; but Width declare a fixed width like width: 100px; It's fixed only 100px;


Example of CSS Min Width and Height

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .safdiv2{
      height: 40px;
      min-width: 60%;
      max-height: 200px;
      border:3px solid red;
      float: left;
    }
  </style>
</head>
<body>
  <div class="safdiv2"></div>
</body>
</html>

Output:


This div can't small more than 50% of his main div or body tag.

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic