WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Layout - width and max-width


Using width, max-width and margin: auto;

As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins:

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

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:

This <div> element has a max-width of 300px, and margin set to auto.

Tip: Resize the browser window to less than 300px wide, to see the difference between the two divs!

Here is an example of the two divs above:

Example

div.ex1 {
    width: 300px;
    margin: auto;
    border: 3px solid green;
}

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