/* <length> values */
width: 300px;
width: 25em;
/* <percentage> value */
width: 75%;
/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;
/* Global values */
width: inherit;
width: initial;
width: unset;html {
position: relative;
min-width: 1024px;
min-height: 768px;
height: 100%;
}
<!-- Remove height 100% if needed fixed height --><div style="background-color:navy;">
<div style="width:50%; margin-left:20%; background-color:chartreuse;">
Width: 50%, Left margin: 20%
</div>
<div style="width:30%; margin-left:60%; background-color:pink;">
Width: 30%, Left margin: 10%
</div>
</div>
The width property in CSS specifies the width of the element's content area. This “content” area is the portion inside the padding, border, and margin of an element (the box model).