width, max-width and max-height, overflow Property in CSS Layout

CSS Layout - width , max-width, max-height, margin:auto, Overflow

width, max-width and margin: auto;

A block-level element always takes up the full width available. By setting the width of a block-level element to some value will restrict it from stretching out to the edges of its container. Then, by setting the margins to auto, will align the element horizontally within its container. The element will only take up the width specified, and the remaining space will split equally between the left and right margins:

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
This <div> element with ex1 class has a max-width of 500px, and margin set to auto.

Note: The problem with the <div> above occurs when the browser window is smaller than the width of the element. 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. This is important when making a site usable on small devices:

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

Here div element with class ex2 has the maximum width of 500px else we can assign it to max-device-width. Max-width is used where we would like to run our page on different screen sizes.  This property is helpful in creating responsive websites.

CSS max-height Property

The max-height property defines the maximum height of an element in css.

If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the  overflow property.

If the content is smaller than the maximum height, the max-height property has no effect.

Set the maximum height of a element to 50 pixels:

p.ex1 {
  max-height: 50px;
}

Note: This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.

Syntax

max-height: none|length|initial|inherit;

none         No maximum height specified. This is default  

length        Defines the maximum height in px, cm, etc.

%             Defines the maximum height in percent of the containing block 

initial         Sets this property to its default value. Read about initial   

inherit        Inherits this property from its parent element

CSS overflow Property

The overflow property specifies how the content be handled if it overflows an element's box. This property is used configure how to clip content or to add scrollbars when an element's content is too big to fit in a specified block.

Note: The overflow property only works for block elements with a specified height.

Example

Show different overflow property values:

div.ex1 {
  overflow: scroll;
}
Enables the scrollbar if content exceeds the block, displays clipped content only.

div.ex2 {
  overflow: hidden;
}
Hides the extra content and displays the clipped content only

div.ex3 {
  overflow: auto;
}

If overflow is clipped then scrollbar should be implemented to view the clipped content.

div.ex4 {
  overflow: visible;

}

The overflow is not clipped. It is displayed outside the element's box

Also See : Let us Learn CSS Step by Step       Learn about Goods and Services Tax