Problema con diseño simple a tres columnas expandibles

[fmorales]

Hola, mi problema es el siguiete.

Estoy haciendo una web, cuyo cuerpo central sera de 950px, y los laterales, el izquierdo y el derecho se auto ajustaran al ancho de la resolucion del usuario .... mostrando una imagen de fondo.

Este es el codigo basico que he realizado:

Código:

<style>
#barraBusqueda {
	margin: 0 auto;
	background-color:#012e57;
	height:30px;
}
#leftContainerSB {
	float:left;
	background-color:#012e57;
	width: auto;
	height:30px;
}
#mainContainerSB {
	background-color:#fffff;
	width: 980px;
	padding:0px;
	margin:0px;
	height:30px;
}
#rightContainerSB {
	float: right;
	background-color:#012e57;
	margin-right: auto;
	margin-left: auto;
	width: auto;
	height:30px;
}
</style>

  <div id="barrabusqueda" align="center">
     <div id="leftContainerSB"> izquierda </div>
     <div id="rightContainerSB"> derecha </div>
     <div id="mainContainerSB">Cuerpo central</div>
  </div>

Todo funciona, se ajusta al centro, y los laterales se expanden y contraen cuando cambia la resolucion PERO ... estoy intentado poner en la izquierda y en la derecha una imagen de fondo que se repita para rellenar la zona que se expande o contrae con un dibujo .... pero la imagen de fondo que defino no aparece a no ser que tenga algún texto o contenido dentro del DIV ... en cuyo caso la imagen llega unicamente hasta donde alcanza el texto ...

he probado con:

Código:

    <div id="leftContainer" style="background:url(/imagenes/fleco_izq.png); background-repeat:repeat;">

    ó    

    <div id="leftContainer" style="background: transparent url(/imagenes/fleco_izq.png) repeat top right; background-repeat:repeat ">

pero nada, no lo consigo, tambien he probado a meter la imagen dentro del div ...

<div id="leftContainer"><img src="...." width="100%" height="100%"></div>

pero nada ...

Cualquier ayuda sería muy apreciada .... muchas gracias

[modeloscanarias]

Hola,
en vez de poner como height 30 px(me imagino que es la altura de la imagen) pon min-height:

<style>
#barraBusqueda {
margin: 0 auto;
background-color:#012e57;
height:30px;
}
#leftContainerSB {
float:left;
background-color:#012e57;
width: auto;
min-height: 30px;
background-image: url(/imagenes/fleco_izq.png);
background-repeat: repeat;
}
#mainContainerSB {
background-color:#fffff;
width: 980px;
padding:0px;
margin:0px;
min-height: 30px;
}
#rightContainerSB {
float: right;
background-color:#012e57;
margin-right: auto;
margin-left: auto;
width: auto;
min-height: 30px;
background-image: url(/imagenes/fleco_izq.png);
background-repeat: repeat;
}
</style>

....tendria que funcionar ya que poniendo o no contenido en los divs, tu impones de que la altura sea de por lo meno 30px

[fmorales]

Nada, no funciona, .... la imagen no sale .... pruebalo, veras como no sale ... unicamente sale .. si meto algo en el div ... texto por ejemplo ... pero si no hay nada ... no se muestra la imagen ni el repeat claro está

Iniciado por modeloscanarias

Hola,
en vez de poner como height 30 px(me imagino que es la altura de la imagen) pon min-height:

<style>
#barraBusqueda {
margin: 0 auto;
background-color:#012e57;
height:30px;
}
#leftContainerSB {
float:left;
background-color:#012e57;
width: auto;
min-height: 30px;
background-image: url(/imagenes/fleco_izq.png);
background-repeat: repeat;
}
#mainContainerSB {
background-color:#fffff;
width: 980px;
padding:0px;
margin:0px;
min-height: 30px;
}
#rightContainerSB {
float: right;
background-color:#012e57;
margin-right: auto;
margin-left: auto;
width: auto;
min-height: 30px;
background-image: url(/imagenes/fleco_izq.png);
background-repeat: repeat;
}
</style>

....tendria que funcionar ya que poniendo o no contenido en los divs, tu impones de que la altura sea de por lo meno 30px

[fmorales]

Nada .... si le pongo por ejemplo al width una tamaño fijo en pixeles si que se muestra la imagen de fondo... pero si le pongo auto, la imagen no se muestra y unicamente aparece si hay contenido dentro del DIV

AYUDA POR FAVOR .... alguien puede decirme como puede aparecer la imagen de fondo con un repeat automaticamente sin que haya contenido en la celda??? y que llegue hasta donde se expande el DIV???

Muchas gracias

[TheDark03]

cheka esto ya lo probe... y si sale

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>Documento sin t&iacute;tulo</title>
</head>
<style>
#barraBusqueda {
    margin: 0 auto;
    background-color:#012e57;
    height:30px;
}
#leftContainerSB {
    float:left;
    width: auto;
    min-height:10240px;
    background:url(bg-light.jpg) repeat-y;
}
#mainContainerSB {
    background-color:#fffff;
    width: 980px;
    padding:0px;
    margin:0px;
    height:30px;
}
#rightContainerSB {
    float: right;
    background-color:#012e57;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    height:30px;
}
</style>
 
  <div id="barrabusqueda" align="center">
     <div id="leftContainerSB"> izquierda </div>
     <div id="rightContainerSB"> derecha </div>
     <div id="mainContainerSB">Cuerpo central</div>
  </div>
<body>
</body>
</html>
 

si no te sale puede deberse a tu browser.. saludos por ejemplo en el IE6 no funciona x q no reconoce la propiedad min-height.