Have you ever been in the middle of laying out a design in HTML/CSS, and wondered (maybe out loud, yea?), “Why the f is my div not showing up?! <…five minutes of grunting and self-hate later…> Oh, I didn’t set a height and width. Duh.”

I’ve come to adopt a simple tactic to avoid such mistakes. I simply throw on a colored border (or background color) on the div upon which I’m working.

That way, I can quickly identify my box model on the page, and quickly find out whether the CSS is doing what I expect it to be doing.

#myDiv {
  border: 1px solid yellow;
  display: inline-block;
  float: left;
  height: 50px;
  width: 100px;
}

Enjoy!