A web page is a collection of HTML elements. CSS can control the design of an element, like its color, font, and spacing.
CSS can also control where an element sits on a page to create a page layout.
For example, the layout to the right has a top navigation bar, a large feature element, a grid of images, and then three pieces of supporting content.
What CSS properties are available to move elements around and create page layouts? Here are three common CSS properties.
CSS treats HTML elements like boxes. A box can be "block" or "inline".
Block elements display on a new line (e.g., h1, p, ul, li).
Inline elements display on the same line as their neighboring elements (e.g., img, a)
It's possible to change whether a box is block or inline by using the
display of the li elements from
inline so that they display on the same line.
position property is used to move an HTML element to a precise position on the page.
position: relative, you can use the CSS properties
right to shift an element away from where it would have normally appeared on the page.
In the editor/html window, change
55px. This will shift the h1 element 91px away from the top and 55px away from the left of its original position on the page.
float property moves an element to the far left or far right of the page.
For example, setting
float: right pulls an element to the far right side of the page, and the surrounding text wraps around it.
img selector, set
float: right to pull the image to the far right side of the page. Then inside the
clear: both. The
clear property turns off the
float, so the "Learn More" section returns to its normal flow on the page.