3

Everyone knows that there are problems with the float CSS property: there are text jogs in some browsers, you have to clear them to pull parent elements around a floated div, etc.

Let's assume I build a layout and float everything, and I'm careful to control for the browser-specific bugs. Are there disadvantage to using float for everything? Will the page take longer to render, or is there a better practice?

I'm trying to improve my CSS layout building technique.

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Kevin Burke
  • 61,194
  • 76
  • 188
  • 305
  • I know of no browser specific float bugs and once I learned how to properly use it, works perfectly fine in all browsers going back to IE6. – Sparky Jun 27 '11 at 17:14
  • http://www.positioniseverything.net/explorer/threepxtest.html – Kevin Burke Jun 27 '11 at 18:03
  • Is that it? A miniscule text padding issue in a browser nearly nobody is using? Ok, so maybe I should have said _"perfectly fine in all browsers going back to IE7"_ – Sparky Jun 27 '11 at 18:09
  • also http://www.positioniseverything.net/explorer/doubled-margin.html – Kevin Burke Jun 27 '11 at 19:04
  • another one confined to IE6... just add it to the pile of other IE6 bugs. Like I said, nearly nobody is using it. – Sparky Jun 27 '11 at 19:14

3 Answers3

1

Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag.

For example, widening the screen would cause more elements to fit on the top line, so they would jump up. Items not in the top line will slide down, and then catch on the corner of an element slightly taller than everything before it.

Float is a handy tool, but it's no panacea; use with caution. Make yourself a sandbox site, and use something like Chrome's developer tools, or Firefox w/ Firebug to see what results you get when floating it all.

Bryan Agee
  • 4,924
  • 3
  • 26
  • 42
1

@kevin; float is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.

Every browser renders float correctly. yes if you use clear:both in your markup like this

<div style="clear:both"></div>

it's increase your markup which increase your page loading time. . SO, use overflow:hidden in your css to clear it.

Bryan Agee
  • 4,924
  • 3
  • 26
  • 42
sandeep
  • 91,313
  • 23
  • 137
  • 155
1

I dislike using floats because of these clearing issues. I generally use display:inline-block, and for my IE6/7 stylesheet for the same rules, I put zoom:1; display:inline

With inline-block, block elements flow like inline elements, while behaving like blocks. This I feel is more intuitive than breaking out of the flow like floats do.

I use this kind of layout on my twitter client: https://timshomepage.net/twitter And here's the uncompressed stylesheet: https://static.timshomepage.net/css/twitter.css

timw4mail
  • 1,716
  • 2
  • 13
  • 16