CSS Layout Basics

June 28, 2018
css layout position centering

CSS display properties: block, inline, and inline-block

As we know, HTML elements are usually either “block-level” elements or “inline” elements. A block-level element occupies the entire space of its parent element (container), thereby creating a “block”; inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. However, we can notice these three CSS display properties: block, inline, and inline-block. What are the differences and how to use them?

Two-column (left-right) layout

  1. Using float:

    JS Bin on jsbin.com

    Remember we may need to clear the floats (by adding the class “clearfix”) on the parent element to keep the normal flow.

  2. Using flex:

    JS Bin on jsbin.com

    Just apply display: flex; to the parent element, and it also remains normal flow.

  3. CSS tricks: Left Half and Right Half Layout – Many Different Ways

(To be continued, will update on more techniques with further learning :)

Three-column (left-middle-right) layout

  1. When it comes to columns with fixed width, just add another element for the middle part and use the float and flex techniques shown above.

    JS Bin on jsbin.com

  2. Another example using float: fixed width for left and right divs, flexible width for the middle div. Set margin-left for the middle div greater than/equal to the left one’s width, and similarly set margin-right greater than/equal to right one’s width; the middle div doesn’t have a float property.

    JS Bin on jsbin.com


comments powered by Disqus