Creating floating columns is one of the best uses for floats. The key is to ensure you calculate the box-model correctly, and to do that we’ll steer clear of margins and borders for our floated container.

As you can see you’ve applied a 49% width to both containers, which adds up to 98%. We’ve then applied a 1% right padding to both blocks, which makes up the missing 2%. We could have just as easily applied padding: 0 0.5%; to both containers which would add half-a-percent of padding to both containers left and right sides. The key is to ensure you’re not going over 100%.

To apply border and padding to the floated elements you need to create an inner container which you’ll then target with the appropriate CSS. Continuing on from our previous example, you can apply borders and padding to the inner block without effecting the floats: