As you may know from the CSS box model, borders contribute to the actual width of a DIV. For example, if a DIV has width: 50px and border-left: 1px, then the actual width is 51px.
figure 1
figure 2
This box model theory causes a problem when a DIV’s width is set as a percentage. Float’s will wrap around if their widths are set exactly as their intended width (figure 2). Right now, I’m using a ghetto solution: set one DIV to be 1% less than the intended width (figure 1). But as you can see, it’s not the ideal solution - I don’t get pixel perfect precision - see how the shadow juts out a little on the right?
Do any of you know how to prevent this wrapping while still have the DIVs’ widths’ be their intended width?