Ayuda por favor con diseño simple a 3 columnas

fmorales · #1 (**permalink**) 01/07/2010, 02:36

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

#2 (**permalink**) 01/07/2010, 17:45

De pronto si agregas la propiedad

overflow:hidden;

a #mainContainerSB puedes evitar que el contenido se salga. Aquí puedes ver otras opciones, como barras de desplazamiento:

http://www.w3schools.com/css/pr_pos_overflow.asp