Why is float:left used on row-fluid?

[TTimes]

The design i'm currently building has instances where the editor needs to enter a negative margin top on a section to drag it behind the section prior. 

While this approach worked in Safari, Firefox and Chrome had other thoughts about it, because the .row-fluid container has float:left on larger breakpoints which kept the section from sneaking behind the one before it. It would go as far as to the bottom edge of the element before it and then stop.

Removing the float definition fixes the issue (as it should) but it also doesn't seem to break anything on the page nor in the editor, so what is the purpose of the floats?

I would preferably want to add a custom CSS field on the wrapper and use position:relative; and negative "top" definitions instead, but that doesn't seem to be possible? I can't seem to find where to add it at least. All I see is:



Building upon the Hubspot Boilerplate btw.

[Mark_Ryba]

I've submitted an idea in the past (I believe) to automatically refactor negative top and bottom margins into transform styles, but I have heard some reasonable debate on the validity of both. That said, I just played around on my site, which is built using the boilerplate and DND editor and was able to accomplish a negative top margin on both individual modules and sections... Do you have a preview link where I might be able to dig further?

[TTimes]

@Mark_Ryba 

I might need to clarify that i have a working solution, but it required that i removed the "float:left" definitions on then span elements in row-fluid for it to work in more browser than just Safari. 

Since removing the float definition didn't really break anything, i was curious as to why they are even there in the first place. Seems they are a leftover based on @Babak 's reply.

Just wanted to make sure i didn't cause any harm for future development.

I would have prefered adding a field to use "top" values instead for margin-top on the Section styles, where the alignment and spacing + background styles reside, but it seems that it's not possible.

[Babak · Accepted solution]

I think the reason is that they are using a customized/optimized version of Bootstrap 2 as they mentioned here , so because of that you are seeing "float" properties here and there

While the file is based on Bootstrap 2, it has been stripped down to include only the code that is necessary to make the rows and columns of your layout stack on mobile devices. You can learn more about layout.css

So about grid layout MAYBE you can find some answers on the Bootstrap document
https://getbootstrap.com/2.3.2/scaffolding.html
CSS file:

https://getbootstrap.com/2.3.2/assets/css/bootstrap.css

[TTimes]

I guess that might be the most reasonable explanation. Since i removed the float i've encountered zero issues, just wanted to make sure i wasn't causing any harm down the line. Thanks

[dennisedson]

@Mark_Ryba , @Oezcan 

How do you all get around this?