Begin with your web browser window quite large / wide. After reading the text below, slowly shrink your web browser window to be very narrow.

This box has no width specified at all, and like any block level element will fill the entire available horizontal space.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This box uses the width property. This box will always be 800px wide even if the browser window is narrower than 800px (think horizontal scrollbars). This means we will need to specifically override this width value within a media query to make this layout work with smaller tablets and smartphones. The width property and pixel value combination still have their place in modern / responsive web design when attempting to create a heavily stylized, branded, or precise appearance. Although, the width/px combo is certaintly not the universal staple that it once was.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

There is no right or wrong way to build a layout. Even when it comes to units of measure some developers use pixels, others use percentages, others use “em”, others use a mixture of all three. I encourage you to experiment trying to create different layouts and see what works and makes sense for you.

Personally, I use “width” and percentage values for columns, and I use “max-width” and pixels or ems for the outer container element to avoid line lengths that are too long to read comfortably on large monitors. In modern web design, many layouts do not require an outer container element at all. You can simply utilize the full browser window width and use media queries to include a bit of extra horizontal padding and increase the font size for larger screens. This blue box which has a class of “notes” is using that strategy.