CSS Float Problem

[Atomic]

Sorry for being annoying but I have a very obvious problem.

I have a two column layout with header in a container. My problem is that text in the left sided 'content' div is coming out of the div and going into the next div which is 'navigation'

This is my CSS: Please note I will be adding padding to the left and right of the 'content' and navigation' div of 10 pixels per side, so obviously I assume if I have 10px left and 10px right of padding in the content div I will then have to readjust the width to 520? and similer to that of the navigation div?

To solve this would I have to set both div's as 'left' in terms of float because I've read on so many places that doing so is quite bad coding :/

@charset "utf-8";
/* CSS Document */
body {
background: #bfadad;
}
#container {
background: url(/images/bg.gif) repeat-y;
width: 755px;
margin: 0 auto;
}
#header {
height: 262px;
background: url(/images/header.gif) no-repeat;
}
#content {
float: left;
width: 530px;
}
#navigation {
float: right;
width: 225px;
}
#footer {
background: url(/images/footer.gif) no-repeat;
height: 68px;
clear: both;
}

Sorry for stupid question, and many thanks to any assistance.