Are empty divs bad?

Question

I'm making a website in Aptana and i'm using an empty div element for the styling of a border-bottom.

I couldn't make it part of the element it's a border of because it needs to have the same width all the time and that supposed parent element in fact changes size depending on the content.

Question being: Is it bad to use empty divs like this? Aptana gives me a warning. It says i "should trim empty div".

I'm talking about the divs down here with the class "showinfo-border-left/right"

<div class="showinfo">
    <div class="showinfo-left">Text</div>
    <div class="showinfo-right">More text</div>
</div>
    <div class="showinfo-border-left"></div>
    <div class="showinfo-border-right"></div>

Answer 1

From the HTML5 spec:

3.2.8.2.8 Palpable content

As a general rule, elements whose content model allows any flow content or phrasing content should have at least one child node that is palpable content and that does not have the hidden attribute specified.

This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.

So since divs allow flow content. empty divs are something generally to be avoided, but not invalid nor anything to get hung up about.

Answer 2

From Best Practices for Speeding Up your Webpage

Reduce the Number of DOM Elements

A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example. A high number of DOM elements can be a symptom that there's something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there's a better and more semantically correct way to do your markup. A great help with layouts are the YUI CSS utilities: grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser's defaults formatting. This is a chance to start fresh and think about your markup, for example use <div>s only when it makes sense semantically, and not because it renders a new line. The number of DOM elements is easy to test, just type in Firebug's console: document.getElementsByTagName('*').length And how many DOM elements are too many? Check other similar pages that have good markup. For example the Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).

Answer 3

No, Its not bad to use it like this. But you can avoid this using psudeo content like,

.showinfo:after{
content: "";
display: block;
/*
 this will be the style for your div after
 but dont forget to specifiy the width and height and act like its a new div
 */
}

Answer 4

If it is only a couple of them or a couple of tens of them, it will not make a significant difference and you can use them if they do the job nicely.

But if you have around a hundred or more of them, then you should reconsider your approach, since it will increase the number of DOM elements. In general, the less DOM elements, the better. More information about optimization can be found in this excellent Yahoo's article on optimization.