Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is float for layout bad? What should be used in its place?

Tags:

html

css

I've made the jump from HTML table layout for designing webpages to CSS about a week ago and have since been reading more about it. Yesterday, I read a long post here on Stack overflow where users were knocking float and how deprecated they are for layout. There was a lot of talk about inline-block being used in its place.

I have an HTML5 design that I just finished and it looks fantastic in Firefox and Chrome, but when tested in Internet Explorer 7, 8, and 9, the design absolutely explodes. It seems to me that anything in this design that I've floated right is not honored in IE. It just seems to wrap under whatever is to the left of it.

I'd like to know if I'm OK with floats or if I should I be using inline-block instead. An example of how to have two divs next to one another where one is on the left side and the other on the right, using inline-block would be nice.

like image 490
Muzz Avatar asked Mar 19 '12 19:03

Muzz


People also ask

Is it bad to use float?

The short answer: clear: both. Floats work really well in small cases like when there's an element, such as a button, that you'd like to move to the right of a paragraph. But the real issue arises when you start using floats to lay out entire web pages. And the reason for that is: floats are not meant for layouts!

Is it bad to use float CSS?

Is CSS float deprecated? In a word: no. The float property still exists in CSS as it did when Internet Explorer was a young browser, and still works the same. But I would advise you to avoid it entirely for layout purposes.


2 Answers

Floats were never meant for layout.

They’re simply meant to take an element, put it to one side, and let other content flow around it. That’s all.

Eric A. Meyer, in Floats Don’t Suck If You Use Them Right

The early web was influenced by print/academic publications where floats are used to control the flow of text around figures and tables.

So why did we use them for layout?

Because you can clear a footer below two floated columns, float layout came into being. If there had ever been a way to “clear” elements below positioned elements, we’d never have bothered to use floats for layout.

Today, the CSS Flexible Box Layout Module flex and the CSS Grid Layout Module grid are optimized for user interface design and complex layouts and are expected to complement each other.

Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts.

Flexbox and Grid are—as of this writing—W3C candidate recommendation and candidate recommendation draft, respectively. Flexbox is supported by all major browsers and has known issues in IE11. Grid is supported by all major browsers but IE11 supports an older version of the spec.

like image 171
melhosseiny Avatar answered Sep 22 '22 19:09

melhosseiny


This question is from 2012 and the other answers are outdated.

Floats should not be used for layout anymore (though you can still use them for the original purpose - floating text around images).

Flexbox is now widely supported and is better for layout.

like image 22
MGOwen Avatar answered Sep 18 '22 19:09

MGOwen