-1

I'm using a div with css of clear:both;

The div has no content and the clear:both is the only style applied to it. It works fine on my devices to solve floating problems.

My question is: does the div need content, like a non breaking space to work on all devices and browsers? Do some browsers ignore empty divs?

Thank you

braX
  • 11,506
  • 5
  • 20
  • 33
user2991837
  • 626
  • 1
  • 8
  • 17
  • You should check out the [clearfix](http://css-tricks.com/snippets/css/clear-fix/) trick. Simply apply the class to the container wrapping the floated elements. By using pseudo classes you can avoid empty elements. Not that empty elements is necessarily wrong, but pseudo elements are more of a semantically correct way of doing this... – War10ck Jun 05 '14 at 16:03
  • Instead of adding extra divs, you could use the pseudo `:before` and `:after` elements, with the `micro clearfix hack` - http://nicolasgallagher.com/micro-clearfix-hack/ – Nick R Jun 05 '14 at 16:05
  • Other links of interest: http://stackoverflow.com/questions/490184/what-is-the-best-way-to-clear-the-css-style-float, http://stackoverflow.com/questions/6681768/how-to-not-use-div-class-clear-in-markup In most cases all you need is `overflow:hidden;` on the container to clear floated elements, the empty div thing is tacky. – Wesley Murch Jun 05 '14 at 16:14

1 Answers1

0

I'am pretty sure no browser 'ignores' an empty divs. I would add a 100% width just to be sure it works.

Roberto Contardo Wirth
  • 99
  • 4
  • Thanks for the help everyone. I'm going to stick with the empty div because I can't seem to get anything else to work and it is a simple solution (but slightly naff). Thanks again – user2991837 Jun 05 '14 at 19:15