Site indelen met CSS en DIV 's

Hallo,
ik ben eigenlijk nog een "groentje" op het gebied van css, wel kan ik al een aantal dingen dus grootte divs achtergrond links opmaken etc..

Maar nu wil ik mijn hele site indelen met CSS en DIV 's, het is een vrij simpele opbouw maar toch krijg ik een aantal dingen niet voor elkaar.

wat ik wil: http://after-party.nl/opbouw.png
wat ik heb: http://www.after-party.nl

wat er dus fout gaat is de text-box en de info-box deze komen niet goed te staan.. ik heb al een aantal tutorials gelezen maar ik kom er niet uit..

mijn css is nu:

/*
Design by Party-Vision disigns
http://www.party-vision.nl
ALL COPYRIGHTS SERVET
*/

/*BODY 'S*/
.body1 {
	width: 100%;
	height: 100%;
	background: url('images/img01.jpg') repeat-x;
}
.body2 {
	background: url('images/img04.gif');
	text-align: center;
	color: #999999
}
.header {
	width: 760px;
	height: 180px;
	background: url(images/img02.jpg);
}



/* MENU */
.menu {
	width: 760px;
	height: 22px;
	background: url('images/img03.gif');
}
a.nav:link {
	font-family: Verdana;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}
a.nav:visited {
	font-family: Verdana;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}
a.nav:hover {
	font-family: Verdana;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: underline;
}
a.nav:active {
	font-family: Verdana;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}

/* TEXT BOX */

.text-box {
	width: 488px;
	position: absolute;
	top: 227px;
	left: 10px;
	border: 1px solid black;
}
.login {
	width: 222px;
	position: absolute;
	top: 227px;
	left: 538px;
	border: 1px solid black;
}
.nieuws {
	width: 222px;
	position: absolute;
	left: 538px;
	border: 1px solid black;
}

EDIT:

Het is inmiddels gelukt maar nu wil ik een scherm onder de login scherm, maar nu wil ik niet vast zitten aan een hoogte maar nu wil ik dat hij 1 enter er onder zit en dat blijft ookal word het login groter..

is dit mogelijk?? zoja hoe?