Hey everyone, I was wondering if you could help!

Okay so I need a two colums on a web layout I have, the colums will be coming after a navigation and another DIV Tag,

At the moment I have this for the CSS;

Code:
#page-wrap {
	width: 45%;
	background-image:url('images/content-bg.png');
	background-repeat:repeat-x;
	margin: 28px;
	padding: 15px;
	}

#section1 {

        width: 90%;
	float: right;
	margin: 28px;
	padding: 15px;
}

#section2 {

        width: 45%;
	float: left;
	margin: 28px;
	padding: 15px;
}
And I have it in the HTML like this

Code:
<div id='section1'>
<div id='page-wrap'>
Content Here
</div></div>
<div id='section2'>
<div id='page-wrap'>
Content Here
</div></div>
Although section 1 doesn't seem to be displayed correctly, could anybody please correct the way I have coded this!

Thanks in advance!