MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Website Design without CSS floats?

Published on 18 July 14
319
0
0

Whether youâre a veteran designer or a new addition to the designing fraternity, you know exactly what CSS float property is. It is without doubt one of the most used tool. Yet there are doubts


If floating elements are left uncleared, it may be extremely frustrating. F not handled well it could use up precious time, money and effort.


A better alternative


Despite its accurate use, even in normal conditions, CSS can cause unpredictable behavior and styling limitations. In a responsive design scenario, where sizes are changing and expanding or contracting according to space, this is far from perfect. Is there an alternative?


Flexbox is the move to the future for web layouts but, for those of us that support legacy browsers, this is still inaccessible. The display property, on the other hand, has full support and can provide almost all the layout functionality of a float without the drawbacks.

Inline Block


The display property, in combination with float and position, determines the type of box or boxes that are generated for an element. In a very simple nutshell, block level elements span the entire width of their container forcing all subsequent elements to the next line while inline level elements only span the width of their contents, allowing any inline level element to flow up next to it on the same line.


Applying display: inline-block to an element generates an inline-level block container. Think of the text inside a tag. They are all âinlineâ with one another while the tag itself is a block-level container. By understanding this behavior we can use the display property to inline our content next to each other. Since all of our elements remain in the normal flow, we have no issues with a collapsed parent element. In my opinion this is a much cleaner solution which still achieves the desired result.


Why change?


You may think the above are problems that can be dealt with. Hereâs a couple of more reasons to look for alternatives:


  • The evasive centered float, which is the Holy Grail, requires additional markup and multiple CSS properties . With the display method this is simply done by applyingtext-align: center to the wrapper.
  • The biggest advantage of choosing the display method is the ability to vertically align your content. Havenât you tried to center an element to its sibling? You could use positioning with the negative margin/translate trick using float but, again, with a responsive, dynamic environment this is undesirable. Instead applying vertical-align: middle; will perfectly center your elements every time with time, work wasted needlessly.

Obviously, there is no error-free tool. There will be frustration felt with every tool you use. Weâre just trying to keep it at minimum.











Whether youâre a veteran designer or a new addition to the designing fraternity, you know exactly what CSS float property is. It is without doubt one of the most used tool. Yet there are doubts

If floating elements are left uncleared, it may be extremely frustrating. F not handled well it could use up precious time, money and effort.

A better alternative




Despite its accurate use, even in normal conditions, CSS can cause unpredictable behavior and styling limitations. In a responsive design scenario, where sizes are changing and expanding or contracting according to space, this is far from perfect. Is there an alternative?

Flexbox is the move to the future for web layouts but, for those of us that support legacy browsers, this is still inaccessible. The display property, on the other hand, has full support and can provide almost all the layout functionality of a float without the drawbacks.

Inline Block

The display property, in combination with float and position, determines the type of box or boxes that are generated for an element. In a very simple nutshell, block level elements span the entire width of their container forcing all subsequent elements to the next line while inline level elements only span the width of their contents, allowing any inline level element to flow up next to it on the same line.

Applying display: inline-block to an element generates an inline-level block container. Think of the text inside a tag. They are all âinlineâ with one another while the tag itself is a block-level container. By understanding this behavior we can use the display property to inline our content next to each other. Since all of our elements remain in the normal flow, we have no issues with a collapsed parent element. In my opinion this is a much cleaner solution which still achieves the desired result.

Why change?




You may think the above are problems that can be dealt with. Hereâs a couple of more reasons to look for alternatives:

  • The evasive centered float, which is the Holy Grail, requires additional markup and multiple CSS properties . With the display method this is simply done by applyingtext-align: center to the wrapper.
  • The biggest advantage of choosing the display method is the ability to vertically align your content. Havenât you tried to center an element to its sibling? You could use positioning with the negative margin/translate trick using float but, again, with a responsive, dynamic environment this is undesirable. Instead applying vertical-align: middle; will perfectly center your elements every time with time, work wasted needlessly.

Obviously, there is no error-free tool. There will be frustration felt with every tool you use. Weâre just trying to keep it at minimum.

This blog is listed under Development & Implementations Community

Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top