The problem with borders and widths has been solved.
In a nutshell, borders are not included in the element width when you use the width property to set it. So the width of the element in my example was 100% + 2px, which caused the wrapping and overlap problems.
CSS 3 will have calc(), which should let you set the width of an element to 100% – 2px. It doesn’t seem to be widely implemented yet, though.
But the standard also giveth. CSS 3 has box-sizing, and it’s supported (via -moz-box-sizing and -webkit-box-sizing) in the non-retarded browsers. Setting it to border-box causes them to account for borders when calculating box height and width. According to the spec, legacy behavior was to include borders in width calculations for replaced elements and inputs, which explains why what I saw wasn’t consistent.
Problem solved, hack removed, I am happy.