row-fluid vs row in twitter bootstrap

Bootstrap 2.x to 3.0 class change Bootstrap 2.x-->.row-fluid and Bootstrap 3.0 -->.row

This is what twitter bootstrap says:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Well, that is about container not rows, but if that explanation is not enough for you, then this is the short explanation which should make things clear for you.

NOTE: If its version 2, then row-fluid itself is being float: left which would need to be cleared as you say.

This is because Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.

Hope this helps :)

It depends on what elements you want to know the width of. The row-fluid class itself has a width of 100%. The spans (or columns) have a relative width, set up in such a way that it combines to 100.

On the floating: all columns get floated, this is what makes it fluid. The only height related thing that a row-fluid does is setting min-height: 30px. This makes it by definition strange that anything would collapse to a height of 0.

I'd suspect the styling you've done on top of your old grid is what causes your main problems.