When working with CSS, the usage of floats is a great tool for special situations. However, floating an HTML element in CSS presents its own series of complications when working with elements in a complex layout – floated elements are considered to be rendered out of the flow of the rest of the document markup. Managing margins and positioning within a complex layout can be quite frustrating and time consuming when trying to manage the simple alignment and behavior of floated elements.
Enter the CSS Declaration “display:inline-block”
Inline-block gives you the convenience of the CSS declaration “display:inline” where one element is displayed next to the other on a single line, yet gives you all the attributes of a block element that are not available to an element that is set to “display:inline” – margins, width, text alignment and height can all be assigned to an element set to display as “inline-block.”
Another fantastic attribute of “inline-block” display is that an element given this declaration will not take the full width of its parent, as is the case with block elements. Width ‘wraps’ to the content within the element. This is very helpful when building menus, or dealing with complex layouts.
Inline-block and Vertical-align
Elements that are displayed as inline-block also respect the attribute vertical-align. This is very helpful when working with layouts that contain blocks of markup that have variable heights, yet need to appear consistently aligned in a vertical fashion when they are to be displayed side-by-side. This type of alignment is very complex to perform with floated elements, and next to impossible to perform when the height of blocks of markup are variable.
Responsive Design
When working with responsive design, inline-block is a great tool for creating multi-column layouts at desktop resolutions that need to collapse to single column layouts on smaller screen resolutions. By simply changing the declared width of elements from fixed values to 100%, inline-block elements will display exactly as a block element. No managing floats!
Inline-block offers many advantages when working with complex layouts over floated elements. Obviously it is not a ‘one-size-fits-all’ CSS approach, since floated elements offer their own advantages, but when used with the concept of the rendering and attributes it inherits, display:inline-block is a very helpful tool to speed up CSS design and limit layout complexity!
For professional help with improving your website’s design, contact the experts at BlueHat today.
