Web Development

There has been a lot of confusion when using the inline-block value of the display css property. This is a simple tutorial for you when you find yourself needing inline-block.

float is a way to cleanly use up the whole width of the browser even with block elements like div and p. There is a problem when using floats. The container of this floats do not wrap around the floating content. This has resulted in using clear-ing of elements.

.clearfix {
  clear: left;  
}

Floating with and without clearing

See the Pen Float test with and without clearing by Thorpe Obazee (@pinoytech) on CodePen.

Using inline-block

inline-block is a way to float elements but not needing to be cleared. Below is a clear way to use inline-block

See the Pen Float and inline-block example by Thorpe Obazee (@pinoytech) on CodePen.