add position: relative; to #wrapper. That will establish a new formatting context that the absolute positioning of #surf will be relative to (you’ll need to adjust the margins and left settings of #surf). For the second issue, opacity affects all children – there’s no workaround. Remove the opacity from #page-wrap and use a transparent background instead – background-color: rgba (105, 37, 36, 0.9);
Why are calling the same stylesheet twice? And where’s your doctype?