CSS Layout Test Page

Subject of this article are CSS layout properties, what they cause and how they interact. It is a supplement for my passed Blog about the position property.

You might have noticed that web page layout is not done by assigning something like BorderLayout, GridLayout, FlowLayout, VerticalLayout, TableLayout, ... to some HTML container. Rather you need to set some CSS properties on each element taking part in the layout. These properties are not always that intuitive as expected, especially the position property.

---

Let's try out by "click and play", not by writing source code.

Below the following 5 setting panels you find 5 HTML <div> elements, visible as coloured bars, spanning the whole width. You can change the CSS layout properties of each of them by using the setting panel of same color.
If you want to reset, press browser Reload, or Shift-Reload in Firefox.
Mind that

• top, left, bottom, right and z-index are ignored when position is static
• width and height are ignored when display is inline

Thus these fields are disabled initially.

Text and CSS Settings

Text: Box 1 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Text: Box 2 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Text: Box 3 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Text: Box 4 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Text: Box 5 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Box 1

Box 2

Box 3

Box 4

Box 5

Playground

Here is the playground's HTML:

  <div>
    <div id="box-1">Box 1</div>
    <div id="box-2">Box 2</div>
    <div id="box-3">Box 3</div>
    <div id="box-4">Box 4</div>
    <div id="box-5">Box 5</div>
  </div>

You will find a lot of information and jsfiddle try-out pages on the internet about these CSS properties. Following is a rough description of how they should be understood.

• position: how the element coordinates should be calculated. The default value static causes the browser to locate the element according to the document flow, all others need at least one of top, left, right or bottom. Mind that absolute positions relative to the next non-static parent element. See also my Blog about this property.


• display: a basic layout, either vertically (block) or horizontally (inline). The value inline-block is the same as inline, but the dimension of the element is respected. The value none would make the element invisible, not even taking any place in the layout. Mind that there are many more values for display, but they are not all supported by the different browsers.


• float: a way to arrange elements horizontally as far as the container allows. This was originally made to float text around images. It may be notable that a float element affects its parent's layout.


• clear: a value other than none would denote a "line break" for horizontally arranged elements.


• z-index: default is zero. Any positive value would make an non-static positioned element to be above other elements that might cover it because they are defined later in the HTML markup.


• height, width: the dimension of the element when not to be calculated dynamically from document flow.


• top, left, right, bottom: these are ignored when position is static. They serve to locate the element relatively to their next non-static parent in any other positioning-mode.

Examples:

Give the yellow box a height of 4 em. Then make it inline. You see that height is ignored now. Then change to inline-block. The height is respected again.

Make box 1 float: left and box 2 float: right. You see that the order of elements is different now, box 3 is between box 1 and box2.

Make box 1 float: left. Then increase its height. You see that it pushes more and more of the other boxes to the right.

Try to arrange all boxes horizontally, by either assigning them all float: left or position: inline-block. Then give them all a width of 15 em. You see that they won't fit into the page and will break into the next layout line.

---

Feel free to visit my homepage to see the latest state of this page.