Page layout methods: Normal flow, floats and positioning

There are many different layout algorithms available in CSS which change how HTML elements are displayed, specifically by changing their outer and inner display types as described in the CSS Box Model section.

Flow layout

The flow layout algorithm is the default applied when an elements display type is left to its default block or inline state. This is how elements appear by default, without any changes to their outer or inner display types.

Floats

Floats are used for repositioning elements on a page, specifically by shifting them to the left, or right, until they hit the edge of the parent box or another floated element.

If a floated element contains children, it will be at least as tall as the tallest floated child.

The float property takes one of five values:

  • left: Element is floated on the left side of its container.
  • right: Element is floated on the right side of its container.
  • none: Element is not floated.
  • inline-start: Element floats on the starting side of its container.
  • inline-end: Element floats on the ending side of its container.
The float property may also take any of the following global values: inherit, initial, revert, unset.

The following example demonstrates the float property being used to place three shapes and some text on the same row:

Hello world

The natural ordering of these elements (normal flow) has been changed. First, a div element is setup as a container for floating elements in. The .container CSS rule then floats this container left and sets its width to 100% of its parent element, this prevents the text from being erroneously displayed. The first element inside the container, the blue square, has had float: right applied to it to move it to the right of the container. The next element, the red circle, has had float: left applied to it and is thus floated to the left. The green box element is also floated to the left, the paragraph of text then automatically repositions itself in the remaining space.

When the float property is used, it modifies the display type of an element (in most cases) to be block. For example, inline and inline-block elements become block elements.

The following example uses floats, alongside some styling, to create a simple right-aligned navigation bar:

Unfortunately, floats come with a few issues which can cause complicated layout issues. Generally, we should only use floats for positioning images around text. For example, we can float an image to the left or right of some text:

placeholder

This text is accompanying this image at the side of it as some placeholder text to demonstrate floating an image to the right of some text... Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum soluta reiciendis sit atque reprehenderit aspernatur ullam natus alias. Dicta amet tenetur nemo recusandae asperiores velit, minus debitis, nostrum ipsa, quisquam adipisci. Aspernatur facere in explicabo commodi, nisi laboriosam, sit sint totam, saepe omnis eos ab ut nostrum. A explicabo alias vel incidunt molestiae repellat eligendi? Laborum eius ab dolores mollitia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam et nobis cumque distinctio iusto quisquam sapiente suscipit iure odio. Dolorem itaque incidunt magnam deleniti officia, amet beatae rerum cum suscipit deserunt aut nam dolor nisi rem quibusdam minima non excepturi pariatur blanditiis consequatur et. Corrupti inventore libero ut vero quisquam voluptatum? Voluptatibus magnam mollitia error possimus tempore eveniet. Minima, aut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias officia molestiae velit voluptatum quibusdam, esse eaque, quidem obcaecati hic cumque vero possimus maiores aut temporibus debitis? Cumque libero obcaecati facilis velit sequi aliquid architecto in quis at odit nemo dicta veritatis aperiam, nam explicabo consequuntur blanditiis quibusdam ut enim exercitationem! Illum similique necessitatibus non cum placeat perspiciatis ducimus aperiam tenetur? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, deserunt voluptatibus incidunt nostrum eum architecto vel repellat quis sapiente ipsum.

In this example, the text will wrap around the floated image creating a simple but pleasing to the eyes layout.

Positioning

CSS positioning allows for elements to be taken out of normal flow, this is done with the CSS position property and may take any of the following values:

position: static | relative | absolute | fixed | sticky;

By default, elements are given static positioning - this is the normal flow of a document as has been seen in previous sections.

Relative positioning

The relative position allows you to reposition an element relative to its position in normal flow (where it normally appears). This is done with the the help of four other CSS properties:

  • top, bottom, left and right

The following HTML and CSS will create three squares on separate rows:

Each of the squares is 60 x 60 pixels. To move the blue square up and then to the right of the green and red square, we will use relative positioning. If the following CSS rule is applied to the blue square, it will be repositioned as desired:

The reason it has moved up and to the right, even though bottom and left where specified, is because it pushes the element away from the specified position. bottom: 90px will push the element upwards 90 pixels from where the element originally was. If top was specified, it would push it downwards instead.

When position: relative is used, an interesting side-effect is that the elements position in the DOM is still remembered and so any new elements specified afterwards will result in a space where the blue square was:

Absolute positioning

Absolute positioning is used to remove an element from normal flow, unlike relative positioning though the element is fully removed from its specified position - the element will instead sit in its own layer separate from the rest of the document.

This is useful for popover elements on web pages

Absolutely positioned elements are positioned according to their containing element, by default the initial containing block wraps around the html element. The following example demonstrates usage of a positioning context, explained shortly:

  • The styles from the prior examples have been used, see the previous examples Raw section for the code

The above code will position the blue square beneath and to the right of the second green square, it does this by pushing the element down from the top of the page by 180 pixels (the size of 3 boxes) and then pushes it 60 pixels from the left to the right.

As can be seen above, unlike relative positioning, the second green square filled the gap left behind by the blue square that was taken out of normal flow. It can also be seen that the square has overflowed out of its containing element, hence the scrollbar on the rendered example.

Positioning context

Absolutely positioned elements are positioned based on their containing element, this is the initial containing block that wraps the html element by default. To change the element that an absolutely positioned element is positioned off of, apply position: relative to a parent element of an absolutely positioned element. The following example demonstrates this:

z-index

When an element is absolutely positioned, it becomes capable of obstructing other elements. For example, the following absolutely positioned boxes end up obscured by the last red box:

Hello world 1

Hello world 2

Hello world 3

Hello world 4

By default, positioned elements have a z-index value of auto, which is effectively 0.

  • Negative values move an element lower down
  • Higher values move an element higher up

If we wanted the div that has the text Hello World 2 to appear on top, we just give it a z-index of 1. This will then put the specified box on the top of the stacking order:

Hello world 1

Hello world 2

Hello world 3

Hello world 4

Fixed positioning

Applying position: fixed to an element will position it in relation to the viewport window (what you can see). This means the element will always stay in the same place, regardless of the scroll on the web page. The top, bottom, left and right properties are used to control the position of the element.

  • Like absolutely positioned elements, fixed elements are taken out of normal flow and exist in a layer of their own in the document

You may have noticed a red square at the bottom right of the page, this has been given the fixed position and appears on the page regardless of scroll depth:

Look at the bottom right of the page →. Click the Raw button to see the style that makes it appear there!

Sticky positioning

The sticky positioning method positions elements based on a user's scroll position in relation to the elements positioning context.

  • When not scrolled past the sticky element, it will be positioned according to the rules for a relatively positioned element
  • When the sticky element about to be scrolled out of view, it sticks in a specific place rather than disappearing from view

The following example demonstrates a sticky element (try scrolling down to trigger the sticky behaviours):

Scroll down

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, magnam reiciendis. Recusandae inventore ipsam et. Voluptatum quas fugit cumque itaque.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum natus pariatur, quo delectus omnis laudantium deleniti labore qui odio excepturi iure illo aut aspernatur nihil fuga odit necessitatibus quae perspiciatis a vel voluptatibus ad deserunt vero sed. Iste reprehenderit consequatur odio quo perspiciatis amet, eum magni accusantium aperiam eaque beatae ducimus illum similique hic explicabo, assumenda expedita deserunt officiis incidunt ullam minus fuga deleniti? Ea tempora saepe dolor alias nesciunt beatae provident veritatis quisquam nam sequi iure totam ipsa aut dignissimos, minima distinctio dolorum quas! Natus enim id dolore autem? Quia, esse. Exercitationem accusantium, id molestiae quos sunt quod facilis.

I am in a sticky div.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, vero veritatis? Laudantium at, praesentium quasi in ex porro adipisci quis.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis delectus veniam illo aliquam exercitationem nam eaque voluptates perspiciatis dolorum, consequatur quas quo qui quos soluta saepe laborum vel voluptatibus possimus est! Nobis odio excepturi voluptatum voluptate eum tempora nihil optio saepe, facere sed ut quas libero magnam aliquid ex eveniet accusamus voluptatibus eos asperiores, deleniti enim! At excepturi dolorum quaerat. Fuga amet dolorum asperiores numquam excepturi nesciunt natus quaerat suscipit, ea accusamus doloremque quidem a velit reprehenderit dignissimos hic officiis perspiciatis voluptatum consectetur voluptates. Quo placeat inventore minima suscipit assumenda, adipisci tempore hic. Minima id deleniti neque molestiae repudiandae voluptatem!

When using sticky positioning, you must use at least one of the top, left, bottom or right positioning attributes to specify where the element should stick.

The example demonstrated applies bottom: 0 to a green coloured div. By default, it is stuck to the bottom of its containing div. In this case, once the elements position in normal flow is reached it will scroll up with the rest of the content and not remain stuck to the bottom of the containing div.