Lo primero sería esto:
Código HTML:
<div id="content" align="center" >
Debería ser:
Código HTML:
<div id="content" >
y en tu CSS:
Código:
#content {
margin: 0 auto;/*Centra el contenedor*/
position:relative;
border:#009900 4px solid;
}
Ahora, como tienes dos divisiones flotando no se amplía el tamaño de tu caja contenedora, para eso, la solución es no hacer flotar el div más grande (tú debes saber cual va a ser el más grande) y dejarle un margen con el tamaño de la división que quedará flotando, sería algo como esto (viste que puse el contenedor con posición relativa?)
Código:
#buscador {
float:left;
padding:20px 5px;
width: 120px;/*supongo tu dirás el valor*/
}
#mapa {
margin-left: 121px;/*Este margen es para que quepa la división que está flotando*/
padding:20px 5px;
}
Así cuando la división mapa crezca, el contenedor crecerá con ésta.
Saludos y nos avisas si algo.
PD:
Buscando en el baúl de los recuerdos encontré esto:
Código 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" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#contenedor{
width: 960px;
margin: 0 auto;
position: relative;
}
#header{
height: 160px;
padding: .25em;}
#lateralleft{
width: 120px;
float: left;
padding: .25em;}
#lateralright{
width: 120px;
padding: .25em;
float: right;}
#content{
width: 685px;
margin: 0 auto;
padding: .25em}
#footer{
clear: both;
height: 60px;
padding: .25em;
border-top: 1px solid #CCCCCC;}
</style>
</head>
<body>
<div id="contenedor">
<div id="header">Encabezado</div>
<div id="lateralleft">lateral izq.</div>
<div id="lateralright">lateral der.</div>
<div id="content">contenido.</div>
<div id="footer">pie de página </div>
</div>
</body>
</html>