CSS Layout - width and max-width

Using width, max-width and edge: auto;

max-width attribute sets the maximum width of the element.

Note: The max-width property does not include padding, borders, or margins!

As referenced in the past part; a square dimension component dependably takes up the full width accessible (extends to one side and great as it can).

Setting the width of a square dimension component will keep it from extending out to the edges of its holder. At that point, you can set the edges to auto, to evenly focus the component inside its holder. The component will take up the predefined width, and the rest of the space will be part similarly between the two margins:

This <div> component has a width of 300px, and edge set to auto.

Using max-width rather, in this circumstance, will enhance the program's treatment of little windows. This is critical when making a site usable on little devices:

This <div> component has a maximum width of 300px, and edge set to auto.

Tip: Resize the program window to under 300px wide, to see the distinction between the two divs!

Here is a case of the two divs above:


div.ex1 { width:300px;
    margin: auto;
    border: 3px solid red;
    } div.ex2 { max-width:500px;
    margin: auto;
    border: 3px solid green;
Try it yourself »