Should ALL divs float left?

Question

I'm designing within an application that I inherited. I have done a lot of work to "consolidate" the CSS which was extremely overworked through much copying and pasting without a lot of strategy behind it. One curious thing I found was to style ALL divs as:

<style>
div{ float: left; }
</style>

Do any other applications do this? I would be "unfloating" divs all the time because the majority of my use of divs is in fact a division of content, forcing a new line for items like cell phones and tablets. In my practices, I will style a div float-left if I specifically need it to do that.

Answer 1

Element-based selectors such as a, img or div are mostly used for two purposes:

1. To clean up browser inconsistencies.

   For example, h1 { font-size: 3em; } will remove inconsistencies in default size between different browsers and versions of browsers.

2. To set the default behavior instead of a specific behavior.

   For example, img { border: none; } ensures that Internet Explorer will not display blue border around images when they are embedded in a link. If, on a page, there are a few images where I want to display a border and a few dozen of images where I don't, it's easier to img { border: none; }, then to set a border on those images where I want a border.

In most websites, elements are positioned according to the browser defaults, and are float: left only when needed. For those websites, div { float: left; } wouldn't make sense: it doesn't remove any browser inconsistencies and it sets the specific behavior, rather than the default one.

On the other hand, some very specific websites may prefer float: left to be the default. svidgen suggested fluid layouts. I think more about games. For example, I'm currently working on a game and nearly every element is position: absolute, so #map div { position: absolute; } makes sense.

To determine whether you should keep the div { float: left; }, study:

• How many divs are actually float: left; on the page,

• How many are not,

• Where float: left; effect is cancelled, and how painful is that.

  You may as well find that the effect is cancelled nearly in every class. I had that several times when maintaining legacy applications, encountering some weird styles such as div { font-size: 13px !important; }.