Hola en primer lugar me presento.

Acabo de llegar y he estado leyendo algunos tutoriales de esta web.

He empezado a hacer una prueba, pero al cambiar la resolución del nevegador el div central se me descuadra.

Pego el codigo:

index.php
---------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Prueba</title>
<link rel="stylesheet" href="reset.css" type="text/css" media="all"/>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="estilos-ie.css" />
<![endif]-->
</head>

<body>
<div id="container">
<div id="logo">
logo
</div>
<div id="menu">
menu
</div>
<div id="cuerpo">
<div id="izq">
izq
</div>
<div id="der">
der
</div>
<div id="centr">
centr
</div>
</div>
<div id="pie">
pie
</div>

</div>
</body>
-------------------------------------------------------------------------

estilo.css
-------------------------------------------------------------------------
*{margin:0;padding:0;}

#container{border:2px solid #030000;
width:100%;
height:100%;
}
#logo{border:2px solid #FF8484;
width:100%;
height:5%;
}
#menu{border:2px solid #BE21CD;
width:100%;
height:10%;
}
#cuerpo{border:2px solid #4D0AC9;
width:100%;
height:70%;
float:left;
}
#izq{border:2px solid #08FC86;
width:20%;
height:100%;
float:left;
}

#der{border:2px solid #9AFC08;
width:20%;
height:100%;
float:right;
}

#centr{border:2px solid #28FC08;
width:59%;
height:100%;
float:left;
}

#pie{border:2px solid #F8FC08;
width:100%;
height:10%;
float:left;
clear:left;
}
-----------------------------------------------------------------

Al cambiar la resolución con el control y el ratón, el div centr se desplaza y descuadra la web.

Aqui tego varias dudas, ¿Que resolución debería de usar para diseñar la web?

-La idea es poner arriba del todo un logo.
-Debajo del logo un menu
-Debajo del menu, una parte central formada por 3 columnas:
-Columna izquierda: alguna imagen
-Columna central: texto
-Columna derecha: aqui me gustaría colocar los widgets del twitter y facebook
-Debajo del menu, un pie: con una galeria de fotos, o alguna información.

¿Que os parece la idea de colocar el twitter y facebook en la columna derecha, ¿Descuadraran la web igual que me la descuadra ahora mismo la columna central?

Se admiten sugerencias, y disculpar por el tocho que he puesto.

Saludos.