Steven Voyles

If you’re like me and you find yourself using a lot of nested divs to replace tables yet still have control over the layout, you know that it’s easy to make a mess. It seems like I was constantly losing my place among all those divs when I was searching for a closing tag I had forgotten to write or just otherwise needed to find the end of a div. Recently I’ve started giving every div an id and using html comments to mark the end of my divs like so:

<div id='div1'>
    <div id="div2'>
    </div><!-- div2 -->
</div><!-- div1 -->

I realize this example wouldn’t exactly be difficult to read without the commenting, but I’m sure you get the point. When you find yourself scrolling through lines and lines of text and you see three or four closing div tags in close proximity and need to know which one belongs to the div you’re working on, you’ll be glad to see those comment tags there. Since I do the majority of my development in eclipse, I always have the option of collapsing or expanding code blocks to make those large pages easier to handle, but this technique even helps me see through the clutter in an IDE like eclipse and comes in especially handy for those times when I just need to do a quick edit in a text editor.