Placing elements using float, position and display

Under normal circumstances, the coded elements are placed on the page where the code is. Intuitively this makes sense, and the element moves along with the page when scrolling, so it isn't visible all the time. But, there may be instances where you want some part of the page to be visible at all times, e.g. a header or footer, because it gives the best UI or you just like the design that way. If you have images that are fairly small, you may get a visually better layout having the text float around the image, instead of having a break in the text.

As may be expected, you have a number of options for placement, and as always, some solutions makes more sense than others.

Float is, as the name suggests, to have the element floating between the other elements, should you choose so. Float can have the following values:

Value	Effect
none	The content does not float around the element (default).
left	The element is placed to the left, so the rest of the content floats on the element's right side.
right	The element is placed to the right, so the rest of the content floats on the element's left side.
initial	The element's float value is set to default value.
inherit	The element inherit the float value from the parent element.

For example float:left


In the example shown here, the box is right next to the left margin. Visually this isn't always optimal, and you can of course move the element a bit in by using margin, in this case margin-left. Likewise you may want to consider having some distance between the floating element to the surroundings. In the shown example, margin-right is set to 5px, just to push the surrounding text free of the element's right side.

One thing lacking with float, is the ability to make the content float on both sides, equivalent to having a float:middle option. Beware that if you also apply an absolute position by using position (see further down), the float value is ignored.

One way of placing elements on the page, which is used quite a lot for optimizing the UI, is position. Where you write the code for an element in the HTML file isn't necessarily the same place as where you want the element to be shown. It might be something like a footer which is always visible, or an icon for "goto top" that doesn't appear until you have scrolled so far down the page, that having the function makes sense.

Position can have the following values:

Value	Effect
static	The element is shown as placed in the code (default).
absolute	The element is placed in a fixed position relative to the code. Note: Here you also need to use the four variable for the sides left, right, top and bottom + a distance from the specified side to the element. In this particular case, bottom does not mean the bottom of the page but the bottom of the previous element in the code.
fixed	The element is placed in a fixed position relative to the browser window (viewport). Note: Here you also need to use the four variable for the sides left, right, top and bottom + a distance from the specified side to the element.
relative	The element is placed relative to the code, i.e. for fine tuning of the element's placement. Note: Here you also need to use the four variable for the sides left, right, top and bottom + a distance for how much the element should be moved.
sticky	The element is placed relative to the user's scroll position, i.e. a shift between relative and fixed position, when scrolling. Note: Not supportet by IE/Edge ver. 15 and before. Not supporten by Safari ver. 6.1 and before, but, if you need to support Safari 6.1 and before, you add "position: -webkit-sticky;" before "position:sticky". Here you also need to use the the four variable for the sides left, right, top and bottom + a distance to the side at which the element must stop.
initial	The element's position value is set to default value.
inherit	The element inherit the position value from the parent element.

position:static


position:absolute


position:fixed


position:relative


position:sticky

Display is a setting for how the showing of an element should be handled. You have in tags like SPAN, DIV and TABLE a number of implicit properties in regards to how they are displayed, which you might want to adjust, e.g. a DIV behaving like an inline element, because it can do something that SPAN can't that you need. It could also be parts of a page you want hide until, for instance, an area is clicked on, as done on this site's drop-down menus.

Value	Effect
inline	The element is shown as an inline element. The value cancels some of other variables, e.g. the block element's height and width.
block	The element is shown as a block element.
inline-block	The element is shown as an inline element, but the variables from block element such as height and width still work.
none	The element is removed entirely. Examples shown here
run-in	The element is shown as a block or an inline element, depending on the following element. Note: The value only worked on a few old versions of some of the browsers, and is useless today.
list-item	The element is shown and treated as an LI tag.
inline-table	The element is shown and treated as a table, only inline.
table	The element is shown and treated as a TABLE tag.
table-caption	The element is shown and treated as a CAPTION tag.
table-column-group	The element is shown and treated as a COLGROUP tag.
table-header-group	The element is shown and treated as a THEAD tag.
table-footer-group	The element is shown and treated as a TFOOT tag.
table-row-group	The element is shown and treated as a TBODY tag.
table-cell	The element is shown and treated as a TR tag.
table-column	The element is shown and treated as a COL tag.
table-row	The element is shown and treated as a TR tag.
flex inline-flex	Used for flexbox for adaptive design, as shown in details here.
grid inline-grid	Used for grid for adaptive design, as shown in details here.
initial	The element's display value is set to default value.
inherit	The element inherit the display value from the parent element.

A couple of examples on the practical application:

display:inline-table
Showing something as an inline-table is particularly practical for formulas and other typographical challenges, where you need to have numbers, letters and other symbols stading on top of each other, which HTML is completely unable to do without workarounds. It could be something like isotopes, e.g.

2

1

H. If we take a look at the code:



It looks like this on the page:



display:list-item
You can make a tag like DIV behave like a list item, i.e. the LI tag. The practical application of this will only be relevant on the more advanced sites, but the effect is interesting from a technical point of view. If you have a DIV with display:list-item in an UL tag, you will, as could be expected, get a bullet:



The same DIV in an ordered list (OL tag):



What makes it really interesting for the ordered lists is that the numbering also works, when mixed up with LI tags: