CSS Positioning Help?

[ixAndyix]

I'm currently working on a new website, but I'm having problems positioning the elements on my page - When I make the browser window smaller or view the page in a low resolution, the "Sign up" box moves and covers the rest of the page. I'd like to know how to adjust my site so that when I resize the window or view the page in a low resolution, the elements stay where they should. Perhaps I've made some sort of fundamental error.. I'm rather new to web design. Here's the page and the CSS:

http://psdforest.com/vaultpedia/

http://psdforest.com/vaultpedia/style.css

I'd really appreciate some help.

Thanks,
Andy

[Spiderant]

Hi Andy:

I have posted some css changes you could make. I hope this is what you were looking for.

#page {
  width:1160px;
  overflow:hidden;
}


.logo {
	position:relative;
	float:left;
	width:415px;
	margin:165px 0 0 125px;
}

.signup {
	float:left;
	margin:130px 0 0 160px;
	width:450px;
	height:390px;
	font-weight:bold;
	font-family:Verdana, Geneva, sans-serif;
	border: 1px solid black;
	background:#DDE;}

[ixAndyix]

Thanks for the reply :) That did help somewhat, but the sign up box still moves when you zoom in or use a low resolution. Anyway I can have it stay in place so the user has to scroll to see it if their resolution is too low, rather than the elements being repositioned? Cheers

[rajbdilip]

I have not seen your website though. Try keeping all the contents inside the table giving fixed width.

[ko ko]

Use 'float' property instead of the 'absolute' position. It is the bad idea for using the absolute position for layout formatting. You can float these two layer 'logo' and 'sign-up' box left and right respectively. The absolute position calculate the browser or it parent which has the relative position, and it will be moving all the times when the screen resizing.

.logo {
	float: left;
	margin-right: 22px;
	width: 538px;
}
.signup {
	float: left;
	width: 472px;
}

By seeing with my firefox developer tool, '538px' width for logo and '472px' for signup box are enough and they can stay quite their position. Note that you need to clear after the floating element.
You can simply use '<br />' tag or '<div style="clear: both;"></div>' both. Find out here how to fix float issues on cross browsers compatibilities.

[rajbdilip]

If we use table with fixed width and put all the elements and contents inside it, the position of any element won't change on resizing browser window.