📖 Positioning Elements

Normal Flow of HTML Elements

Elements on a Web page normally flow top to bottom and left to right in the order they occur in the HTML file. If 2 inline elements are placed next to each other that have margins, then the space between them will be the sum of the 2 margins. If 2 block elements are placed on top of each other, the margins are collapsed so that the space between them will be the larger of the 2 margins. These are the default behaviors of page elements.

Float Property
  • Can be set to left or right only.
  • Works only if the width property is used to change the width to something less than the width of the page.
  • Works with the id property to give the element a unique name.
  • Removes the element from the normal flow and moves it to the specified margin.
  • Block elements flow through the floated element as if it wasn't there.
  • Inline elements flow around the floated element.
  • The floated element must be placed immediately below the element that you want it to float below.
  • To keep a block element from flowing under the floated element, give it a margin that is at least as big as the width of the floated element.
  • Should be used to float images in place of the align="left/right" property.

Sample Image Floated Right of Text

Floated Elements

The float property was originally designed for use with images in layouts to allow images to be placed beside text in the same block. Problems arose with making the page content behave after the floated element appeared on the page. Since applying the float property to an element like an image takes the element out of the normal flow of the document, developers must clear those floats to return the content to normal flow. This image is floated next to the paragraph to demonstrate the technique and the following bolded text "Clear Property" clears the float to ensure the paragraph sub-heading and following content are returned to normal flow of the page.

<img style="float: right; margin: 20px;" src="/storage/uploads/1-20200402171737-thumbnail.jpg" alt="Sample Image Floated Right of Text" />

Floating Containers

It can be very beneficial to group elements into containers to aid in controlling the layout of the floated elements. Think of a gallery picture with a caption and brief description. If these images and their cooresponding information were contained, we could arrange the containers so they would all display similarly. Then we simply float the containers with their associated content. When we float them left, they line up in a row from left to right.

Sample Image Floated Left
 Space Spiral 1
Sample Image Floated Left
 Space Spiral 2
Sample Image Floated Left
 Space Spiral 3
Clear Property
  • Specified using clear: both | left | right;
  • Used to stop content from flowing around a floated element.
  • Will move the element below any floated content.
Auto Attribute
  • Can be used for any width property such as width and margins.
  • Allows the browser to determine the correct width.
  • When used with margin-left: auto; and margin-right: auto; it will center the element and make sure the margins are equal.
  • May need to set the display: block; property.

Positioning Elements

Positioning elements on the page is the root issue for all layouts. There are a number of different methods to control the positioning of elements on the page. Each method has desirable traits. Developers need to think about page layouts as collections of layered and stacked blocks. The default layout of HTML is to stack the block level elements on the page in the order they are coded. The placement of each element can be modified using the position rules below.

Relative Positioning
  • Specified using position: relative;
  • Positions an element relative to where it would be located in the normal flow of the page.
  • Other elements will not flow under it like in absolute positioning.
  • The position is an offset from the normal location.
  • Can be used to display an element outside the element's box.
Absolute Positioning
  • Specified using position: absolute;
  • Removes the element from the normal flow.
  • Allows you to specify exactly where the element will appear on the page using pixels or percentages.
  • Elements with absolute positioning are ignored by all other elements.
  • The z-index property can be used to specify which element is on top.
  • If the element that uses absolute positioning is inside another block element, the location will be within that element.
Fixed Positioning
  • Specified using position: fixed;
  • Positions an element specifically within the browser window instead of the page.
  • When the page is scrolled the fixed position, element remains in place.
  • Does not work in IE6.
Sticky Positioning
  • Specified using position: sticky;
  • When the page is scrolled the element scrolls with the page until it reaches the location defined by top: 0; then remains in place usually at the top of the page.
  • Does not work in IE/Edge 15 or earlier. May require -webkit prefix.

Managing Containers

Each block level element can contain any number of other elements. The contained elements can also be positioned within the container and the container can be positioned on the page. Below is a demonstration of the positioning of elements within an article (the container) to enhance the page layout by providing stronger associations between the elements within the container using proximity and alignment. Instead of having an image above its related text, float the image and its caption alongside the related paragraph text. Capture the image in an article container along with a heading and descriptive paragraph. Using this method, similar articles with individualized layouts can be positioned flexibly on the page to enhance layout interest.

Floated Layouts

Over time, the property has been adapted for use with page layouts to take advantage of its unique ability to horizontally "stack" blocks of content by floating block elements next to each other. When using floats to create these multi-column layouts, many developers run into an issue with making the columns all the same height. While there are a variety of ways to address this issue, this article http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403 will walk you through the problem and provides a good way to resolve it using psuedo elements to create layers. It's often easier to resolve these issues by modifying the content to work within the page limits.

A Note About Layouts

Layouts have had a long and arduous road in web development. In the beginning, web pages were long text-based documents used in academia and science. Not long after, images and limited colors were added. Then came the desire to create page layouts that would display the content in a more user friendly and appealing manner. Tables were used in the early days to attempt to control the positioning of elements on a page. These layouts used tables in a way that tables were not meant to be used and created some very complex code that was difficult to maintain.

Later, floats were introduced to allow text to wrap around images and developers quickly realized they could be used for many other elements on the page, but again they fond themselves employing a tool in a way that it was not designed and had to make significant adjustments to the code for it to work. Even then, it was limited in what it could do. It wasn't until Flexbox and CSS Grid were introduced when developers finally had tools that were actually designed to help with layouts.