Prev Page Next Page
Top

CSS width and max-width

➢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.
➢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.

EXAMPLE:

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

Run


Prev Page Next Page





FEEDBACK

Rating


Message