Now in the days of flexbox and grid, floats seem to be very unintuitive way of thinking about styling page layout (at least for me). My question is - what is the crazy logic behind floats?
If you find floats non-intuitive, it's because you're trying to use them for the wrong thing. See this diagram from the CSS 2.2 spec.
Try replicating that with flexbox or grid layouts.
Related
After days of hard work (i know it would've taken a pro only a few minutes), I have finally designed the exact layout I want. The only problem now is that it uses a lot of absolute positioning, which I hear is evil or at least undesirable. Here is the jsfiddle of how I have done this. Can someone guide on which of these <div>s can avoid absolute positioning and instead use more fluid constructs?
I am not sure where you can avoid using absolute positioning in that fiddle, becuase i didn't go through your css. but if older browser support in not a problem, you can create this layout without using absolute positioning at all..
check this Fiddle
It uses css3 calc() function so will only work in modern browsers.
There's a loss of 1% width due to the whitespace problem of display:inline-block elements
This is another Fiddle using display:flex property which avoids the whitespace problem.
Tested and working fine on Chrome 33.0 FF 28 & IE11 (This one was a surprise! :)
CSS Flexible boxes makes it easier to create layouts.
Read more about Flexible Boxes # MDN
Flexbox guide # css-tricks
Float left for the columns and use default relative positioning. Percentage widths and set heights to px if need be. That would the most consistent layout.
First I want to reference this other question, which doesn't quite answer my question. I'm working on a web project which only intends to support evergreen browsers. We're used to using bootstrap, but it seems like we're pulling in a lot of unnecessary CSS Rules given our support matrix.
Are there good/any reasons to use the CSS float property instead of flexbox properties? Is using the float property considered deprecated, for lack of a better word?
To answer your question, float is still useful for its intended purpose: allowing content to wrap around an image or other element.
Some points to consider:
Jake Archibald claims that flexbox should not be used for page layout, due to the fact that content will be rearranged on the page during load on slow connections.
Chris Coyier points to some potential performance problems with too many elements with flexbox (though he is unable to replicate said problems)
Google Developers suggests using flexbox over older layout models
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Once apon a time IE6 lacked support for CSS features such as "display: table-cell" and inline-block, resulting in "float" being hijacked and used for layout - which is was never designed for (or particularly good at).
Using floats seems to result in overly fragile layouts that are difficult to maintain and often break completely with changing dynamic content.
This was a necessary evil in its day, however now that support for browsers pre-IE8 are less of a concern, we should in theory be able to move away from floats and use the parts of CSS that actually work well for layouts - such as the aforementioned display: table-cell and inline-block.
I'm currently considering of recommending my team move away from float based designs entirely - am I at risk of painting myself into a corner and having problems down the line , or is this a better option if older browser support is not important on our project?
Should you move away from floats entirely?
Sure, so long as you don't need the deeper browser support. When it comes down to it, what really matters is whether the page displays properly for the largest numbers of visitors to your site as possible, right?
Another issue that should be of concern to you is maintainability, but I can't say that it'd be accurate to say that either method is less maintainable than the other in every situation. So I'd just ask yourself what layout method your team is more familiar with and how far back you need to support.
display: table-cell is supported in IE8+. Float displays can go all the way back to IE6.
Other thoughts & the future...
Contrary to what you said about floats, I think when used right they can be very predictable. My primary qualm with them is the need to clear the parent which is a bit awkward. Further, popular scaffolding systems like Bootstrap and 960-Grid still choose to use floats, and for good reason: they're useful, have great cross-browser support, and can do what you need to do.
With that said, the future is looking good for Css and layouts. There are two upcoming models of layout in Css: the grid system and the flexbox model. Neither are recommendations yet, so browser support is a bit shaky on them.
The grid system is similar to display: table-cell but gives you much greater control. Flexbox tries to generalize and abstract the idea of displaying elements, which allows for really powerful, fluid (or 'flexible') layouts. Both of these will be pretty amazing once they're implemented in browsers.
If you want to read more on usage of flexbox, I recommend the excellent MDN article about it
Were I you, I'd just hold out and use floats – in particular, by using a scaffolding framework. I haven't worried about writing scaffolding Css in a long, long time; I use frameworks since the code is already written for me. And, for me, I'd only find it worthwhile to completely restructure a project once flexbox and the grid system are a recommendation and more widely implemented.
Like you said is about what is best for your team, but believe me... if you use float correct and in the right places you don't get a layout breaking because you change the div content.
But in the future the best way will be using flexbox, you can accomplish everything about blocks horizontal, vertical, with same sizes, diferrent sizes... Anyway when all browsers support it, will be aewsome.
Please someone explain me css positioning properties in easy to understand plain english?
With examples.
I have been struggling to understand how css positioning work in creating a layout and alignment.
A quick search on Google has lead me to this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
While there are many tutorials on CSS positioning such as
http://www.brainjar.com/css/positioning/
http://www.alistapart.com/articles/css-positioning-101/
http://www.tizag.com/cssT/position.php
http://www.mako4css.com/Tutorial.htm
The problem is that there are a number of ways to position elements on a page, you can use float, position relative divs with absolute nested divs, then you have margins and padding, as well as negative margins. Heights and widths in pixels percentages etc. It's not something to learn from a single tutorial but rather experience.
My suggestion to you is install Chrome and use the developer tool on a basic CSS layout, or FireBug in firefox to learn how CSS works on simple layouts, here you can find many styles of CSS layouts to play with http://www.maxdesign.com.au/articles/css-layouts/
I found this very interesting:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
He avoid using horizontal margin and paddings to avoid problems with IE. I think he "fakes" padding using relative positioning.
Have you ever done something like this?
I'm a missing a common trend against IE hacks?
Does this practice have any drawbacks?
That example is outdated.
Problems with margins and paddings like that were a problem with the broken box model of IE5. In later versions of IE you will only get that broken box model if IE is in quirks mode. That's something you should be avoiding at all cost. Use the right doctype!
The example you linked actually relies on that broken box model. He has an updated version that doesn't:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
But what kind of IE problems are you actually trying to address? Do you specifically want a 3-column layout like in the page you linked to? Do you want general solutions for IE layout problems? Or do you want to be able to forget about IE altogether?
The most important thing to know about when dealing with layout and IE6/7 is its hasLayout property. Read On having layout for all the details on that.
If you are specifically looking for tools that can help you build complex layouts compatible with all browsers, you could have a look at grid frameworks like YUI Grids or Blueprint. But I can't say I'm a fan of those, since they tend to result in unsemantic div soup.
If you don't mind a little (experimental) JavaScript to fix up your entire website automagically, you could give IE7.js a try. I've used this, though it definitely has its quirks and limitations, so use at your own risk.
To come back to your original question, though, relative positioning is no ultimate solution for anything, it's just one of the tools in the box. Understand it and use it when it's appropriate. See, for example, Sitepoint's CSS layout and formatting reference. And as dry as it may be, I find the CSS specification to be invaluable, especially the chapters on the visual formatting model details.