LAS CAPAS NO SE ME PONEN UNA AL LADO DE OTRA.

Para el index, de una trabajo k stoy aciendo, no se me ponen las capas una al lado de otra, y que los links de arriba no se me ponieran en dos filas.
Por cierto el código es este:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
<title>Trabajo de Castellano</title>
</head>
<body>
<div id="links-idioma">
<div id="link-izquierda"></div>
<div id="link-centro"></div>
<div id="link derecha">
<p class="derecha">CatalàCastellano</p>
</div>
</div>
<h3 class="centrado"> Bienvenidos a la página web de ejemplo del trabajo de lengua castellana</h3><p class="centrado">Todas las explicaciones del trabajo, y resolución de dudas</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">Entrar a la página web</p>
<p class="centrado">[correo eliminado]</p>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
body {background-color: #E6E6FA }
.centrado {text-align:center}
img {border-style: none}
.derecha {text-align:right}
a {color: red; text-decoration: none; display: block}
a:link {}
a:visited {}
a:hover {color: orange; text-decoration: underline; background-color: silver}
a:active{}
#link-izquierda {width:266px; float: left}
#link-centro {width:266px; float: center}
#link-derecha {width:266px; float: right}