issue lining up Entry Content with css?

I have been trying to wrap my head around this I am trying to make a mobile theme for a friend. Everything works find until you shrink the browser the content will slide under the featured image. I want it to stay where it is not slide like this http://i.imgur.com/iXYH4vJ.png.

The codes I have used my content and image with are the following not sure if I forgot something or need to add something. I am coming to you guys for help.

Entry Content Code

.entry-content,
.entry-summary {
	width: 90.5%;
	float: right;
	padding: auto auto 0;;
}

Post Thumbnail and Main

.attachment-post-thumbnail {
	float: left;
	height: auto;
	margin: 0 15px 5px 0;
	max-width: 40%;
	width: auto;
}
.attachment-post-thumbnail img{
	 display: block!important;
	 margin-left: auto!important;
	 margin-right: auto!important;
}
#main {
	clear: both;
}

Global Page Code

#page {
	background: url(images/bg.png);
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right;
	background-color: #FFF;
	padding: 3px 0 0;
}

If you could kindly tell what I am doing wrong that would be great I gave you what I think would be helpful to you to help me in my issue. The content just keep sliding under the image I want it to stay in place and remember its a mobile them it can not have a scroll bar on the bottom so no overflow :).

Thanks!