Hola, por favor, me estoy volviendo un poco loco con esto que creo es una tonteria.
Quiero hacer un diseño simple a tres columnas, de las cuales, la central tiene un ancho ficho de 980px y las dos laterales se expanden y contraen automáticamente en funcion de la resolucion del usuario.
Código:
<html>
<head>
<style>
#barraBusqueda {
height:30px;
text-align:center;
margin:0 auto 0 auto;
width:auto;
}
#leftContainerSB {
float:left;
background-color:#002E56;
width: auto;
height:30px;
position:relative;
}
#mainContainerSB {
background-color:#cc0000;
min-width:980px;
max-width:980px;
padding:0px;
margin:0px;
height:30px;
width:980px;
position:relative;
float: left;
}
#rightContainerSB {
float: left;
background-color:#00CC00;
margin-right: auto;
margin-left: auto;
width: auto;
height:30px;
position:relative;
}
</style>
</head>
<body style="vertical-align:top; margin:0px; padding:0px; width:100%">
<div >
<!-- INICIO BARRA DE BUSQUEDA SUPERIOR -->
<div id="barraBusqueda" align="center">
<div id="leftContainerSB"></div>
<div id="mainContainerSB">ESTO ES EL CENTRO</div>
<div id="rightContainerSB"></div>
</div>
<!-- FIN BARRA DE BUSQUEDA SUPERIOR -->
</div>
</body>
</html>
Lo primero que me ocurre es que no puedo centrar todo el conjunto, y cuando lo centro .... si "contraigo" el navegador.... el centro que tiene ancho fijo, dobla y se mete en la linea de abajo.
Por favor, alguien puede indicarme como hacer esto?, tres columnas, el centro fijo, y los esxtremos auto expandibles, y que cuando se reduzca la pantalla a menos de 980px no se vaya para abajo la capa del centro
MIL GRACIAS.
Un saludo