Side by side divs w/ negative relative position
===

I'm trying to create two side by side divs in a wrapper. The first div, #content, is a position:relative div.

    #wrapper {
	background-image: url(assets/images/BG2.gif);
	margin-right: auto;
	margin-left: auto;
	width: 996px;
	overflow: auto;
    }

    #content {
	position: relative;
	top: 10px;
	left: 10px;
	width: 745px;
	background-color: red;
    }

    #important {
	float: right;
	position: relative;
	top: -1120px;
	width: 231px;
	margin-right: 10px;
	background-color: green;
    }

The problem is that the second div, #important, is displayed under the first one. There is enough space for both divs and the padding/margins. I can make it work by floating it to the right and using a negative top position and it displays fine, but I feel as though there is a better/correct way of doing this.

