Placing elements using float, position and display
What is it all about?
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.
Placement using float
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:
The content does not float around the element (default).
The element is placed to the left, so the rest of the content floats on the element's right side.
The element is placed to the right, so the rest of the content floats on the element's left side.
The element's float value is set to default value.
The element inherit the float value from the parent element.
For example float:left
Field containing e.g. an image or a fact box.
Surrounding text/ content that has to float around the field floating to the left side. As can be seen, the text follows the left margin, where there is room for it.
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.
Placement using position
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:
The element is shown as placed in the code (default).
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.
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.
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.
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.
The element's position value is set to default value.
The element inherit the position value from the parent element.
Placement using display
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.
The element is shown as an inline element. The value cancels some of other variables, e.g. the block element's height and width.
The element is shown as a block element.
The element is shown as an inline element, but the variables from block element such as height and width still work.
The element is removed entirely. Examples shown here
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.
The element is shown and treated as an LI tag.
The element is shown and treated as a table, only inline.
The element is shown and treated as a TABLE tag.
The element is shown and treated as a CAPTION tag.
The element is shown and treated as a COLGROUP tag.
The element is shown and treated as a THEAD tag.
The element is shown and treated as a TFOOT tag.
The element is shown and treated as a TBODY tag.
The element is shown and treated as a TR tag.
The element is shown and treated as a COL tag.
The element is shown and treated as a TR tag.
Used for flexbox for adaptive design, as shown in details here.
Used for grid for adaptive design, as shown in details here.
The element's display value is set to default value.
The element inherit the display value from the parent element.
A couple of examples on the practical application:
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.
H. If we take a look at the code:
Deuterium is written like this: <TABLE STYLE="display:inline-table; font-size:65%; border-collapse:collapse; vertical-align:middle"><TR><TD STYLE="padding:0px">2</TD></TR> <TR><TD STYLE="padding:0px;">1</TD></TR></TABLE>H, meaning that it is a hydrogen atom containing two nucleons.
It looks like this on the page:
Deuterium is written like this:
H, meaning that it is a hydrogen atom containing two nucleons.
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:
A bullet list using DIV and display:list-item
The same DIV in an ordered list (OL tag):
An ordered list using DIV and display:list-item
What makes it really interesting for the ordered lists is that the numbering also works, when mixed up with LI tags: