Fundamentals of CSS - Floating, Positioning and Box model

You must be wondering why in the name of god I chose this topic to write on. Well, recently I came across few interesting concepts and thought every Front End Developer should know at least some fundamentals of CSS. Front End Developers mostly focuses on JavaScript and others have at least started considering about learning JavaScript (because of hot, new frameworks or libraries like AngularJS and ReactJS). But every single developer takes CSS and HTML for granted. I am here just trying to familiarize everyone of you with basics of CSS :).

Three of most important concepts to grasp are floating, positioning and box model. These 3 things can control whole layout of your page.

But first lets understand what is Block Level and Inline Level element.

An element can be of two types: Block level element and Inline level element. Block level elements (div, p) takes space of whole block in a page and align themselves vertically one after another. Whereas inline elements (a, span, strong) takes up inline space and lays themselves horizontally next to each other.

You can change behaviour/behavior of inline element as block by setting its display property to block and you can also make any block level element disappear from page by setting its display property to none. In this case element will not be visible and it won't even take any space on the web page.
We can set all the four (top, bottom, left, right) margins ,paddings and border of block level element but can only set two (left and right) margins and paddings of inline elements. That is only horizontal spacing can be set on inline elements. Vertical spacing do not affect inline elements. Then what is workaround? Set display property of inline element as inline-block. As name indicates the element will behave as inline element i.e. they will align themselves horizontally next to each other. Plus, you will be able to set vertical margins and paddings of that element. Another workaround is to set line-height property of inline element. If value of line-height is greater than height of inline element then extra space will get adjusted above and below the content equally and content will automatically get adjusted in center vertically.
All the inline elements are contained in Line Box. Line Box may contain multiple inline elements. Height of line box would be same as the highest inline element. If elements inside the line box can not adjust themselves in one line than they will be passed in next vertical line into another Line Box.

Line Box containing multiple inline elements

Split Line Box

Box model

CSS3 has introduced Box model which specifies how elements are displayed on browser. Every element is considered as an rectangular box consist of element, padding, margin and border. Padding is applied around the element, after padding border is applied around padding. Border could be solid, dashed or dotted. And finally after border, margin is applied.

Older versions of Internet Explorer have some different understanding of Box Model. According to CSS3 standards width and height of element only consider width and height of content whereas IE consider height and width of content + padding + borders. Technically, IE version of box model is correct. Consider a box of stuff, more and more we add paddings/stuffing inside the box, less space will be left for content.

What if I want to use this philosophy of box model in other browsers? Well, we got a property box-sizing to deal with this requirement. box-sizing can be set to content-box or border-box. box-sizing: content-box will consider actual width and height to width and height of content only. Whereas, box-sizing: border-box will consider actual width and height to width and height of content + padding + border.

Margin Collapsing

Margin Collapsing is another interesting concept. While laying out page, when two or more vertical margins meet, they collapse with each other resulting in collapsed margin's height as larger among the two collapsing margin.

This concept may seem weird at first but if you give deep thoughts than you will see why it actually results in good layout.

Above image gives good example of margin collapsing. It would have looked weird if space between Data1 and Data2 were double.

Positioning

In spite of reading position property from different sources you fail to remember the meaning of each value. Right? Lets give this post a shot. I hope you need not have to read it again.

position: relative

Element with property position: relative will not affect anything (neither the flow of all other elements nor position of element itself) unless you set the left, right, top or bottom property of element. This type of positioning is considered as part of normal-flow positioning. If you set left: 20px; then position of element will be shifted to 20px to left from its actual position. That is position relative is relative to its actual position.

position: absolute

Element with position absolute behaves somewhat different than relative. In relative, position of element remain in normal flow and then shifted according to left, right, top and bottom values but in absolute positioning, element is not part of the normal flow. Other elements do not consider absolute positioned elements as there siblings. Absolute positioned elements are not given any space in the document. These elements are relative to there immediate parent element. Left, right, top and bottom properties are relative to their parent.

position: fixed

Position fixed is a type of absolute positioning. Absolute position is relative to its immediate parent whereas fixed positioning is relative to the view port. It does not matter where the scroll is moving the window, but fixed positioned element will always remain stick to its position on view port. Left, right, top and bottom properties will be relative to the view port.

You have seen some sticky ads on websites which will not move even if you scroll. Those are example of fixed positioning.

Z-index

Above positioning of element might result in overlapping of multiple elements, then how to prioritize which element should remain on top and which should be on bottom? Property named z-index will come in picture. Element having greatest z-index value will remain on top and element with smallest z-index value will remain on bottom. There is no limitations for z-index value in the CSS Standard but most browsers limit it to signed 32-bit values in practice. There can be negative value of z-index too.

Floating

Floated box can be shifted either to left or right until its outer edge touches padding of containing box or margin of another floated box. Floated box are not considered in normal flow so other elements behaves as if floated box never existed and do not leave any space for floated boxes. This may result in overlapping of floated boxes over non floated boxes.

In below diagram, initially all the boxes are vertically blow each other. After floating box 1 to right, box 2 and 3 consider that box 1 does not exist in normal flow and they moves up.

In below diagram initially box 1 is floated left, and overlaps box 2. Then all the boxes are floated to left behaves differently in different scenarios.  

To stop boxes flowing around, you need to apply a clear property to the element next to it. clear property can be left, right, both, or none and it indicates which side of box should not be next to a floated box.

Earlier before media queries, floated box were used to create responsive designs.