How do you size and position web page elements?

2 The display property

The display property determines how an element is treated by the browser. It can have one of several values, such as block, inline, inline-block, flex, grid, or none. Block elements take up the entire width of their parent element and start on a new line. Inline elements only take up as much space as their content and can be placed next to each other. Inline-block elements combine the features of block and inline elements, allowing you to set their width and height while keeping them in the same line. Flex and grid elements allow you to create flexible and grid-based layouts, respectively. None elements are hidden from the page.

3 The position property

The position property determines how an element is positioned on the page. It can have one of several values, such as static, relative, absolute, fixed, or sticky. Static elements are positioned according to the normal flow of the document. Relative elements are positioned relative to their normal position, allowing you to offset them using the top, right, bottom, and left properties. Absolute elements are positioned relative to their nearest positioned ancestor, meaning an element that has a position value other than static. Fixed elements are positioned relative to the viewport, meaning the visible area of the browser window. Sticky elements are positioned based on the user's scroll position, meaning they can switch between relative and fixed depending on a threshold.

4 The float and clear properties

The float and clear properties are used to create layouts where elements can wrap around each other. The float property allows you to place an element to the left or right of its containing block, making it float away from the normal flow of the document. The clear property allows you to prevent an element from being affected by the floating elements, making it clear them and start on a new line. You can use these properties to create multi-column layouts, sidebars, or image galleries.

6 The media queries

The media queries are a feature of CSS that allow you to apply different styles to different devices and screen sizes. You can use the @media rule to specify the conditions under which a set of styles should apply, such as the width, height, orientation, or resolution of the device. You can also use the @import rule to import a style sheet that contains media queries. By using media queries, you can create responsive web pages that adapt to the user's preferences and environment.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?