My page elements are overlapping when i shrink the browser window

Can someone tell me how to stop my page elements from overlapping? I have all my posts in the center between a left sidebar and a right sidebar. I want the posts content to shrink down accordingly between the 2 sidebars when the browser window shrinks, without overlap. Ive been pulling my hair teying to figure out how to stop it. My current css code looks like this:

div#content {
	margin: -10px 22% 5px 21%;
        padding-left: 0px;
	text-align: left;
	min-height: 500px;
	height: auto !important;
	height: 100%;
        width: 54.5%;
        float: left;
        position: relative;
        left: 37px;
	overflow: hidden;
        border: 1px dotted #ffffff;
}
div#sidebar {
	float: left;
	width: 20.75%;
	margin-top: -10px;
	margin-left: -21%;
	text-align: left;
        border: 1px dotted #ffffff;
}
div#navigation {
	float: left;
	width: 275px;
	margin-top: -10px;
	margin-left: -99.75%;
	text-align: left;
        border: 1px dotted #ffffff;
}

My site is:
dageniusmarketer.com

if you play with the browser window you’ll see what I mean. Thanks