Satya's blog - A front-end developer is me

I'm not really a front-end developer, more "full-stack" (HTML, CSS, JS, server-side, unix-command-line capable, database-y, etc.). I say, though, that my strengths lie in trouble-shooting and re-factoring.

So today it only took (less than) ten minutes to determine why the layout was broken, with slight familiarity with the HTML and none with the CSS in question. We had 4 divs in a row, and there were supposed to be four more in the next row (rows being defined in CSS; the HTML just had a bunch of div tags).

Correct:
div div div div
div div div div

Wrong:
div div div div
            div
div div div

The second row only had 1 div showing in it, at the far right, so it appeared like divs number 5, 6, 7, were missing. I caught on pretty quick that they were all floated divs, and so most likely the one div in the first row that was different (different CTA (call to action)) was the issue. Sure enough, the CTA in the 3rd div was 1 pixel taller than the rest.

Since I was using Chrome's developer tools to poke at it anyway, I set the CTA's height 1 pixel lower, and everything suddenly lined up. Passed that info to the front-end dev, who fixed it.