Altura minima con CSS

[Dariusss]

Bueno estube buscando en la red sobre como resolver el tema de poder hacer que el CSS le indique una altura minima a una capa (en este caso mi id=="Shadow") para evitar que la pagina se acorte y se alargue segun el contenido. Lo logre o crei lograrlo agregando "min-height:800px;". Se lo tuve que poner tanto al "Shadow" como al "Wrapper"... para que hiciera lo mismo. Como veran estoy empezando en esto del CSS.

Ahora el problema que tengo es que incluso teniendo todos los

height:auto;

Pasa esto http://www.arnaezcs.com/portfolio.html

jeje... Extraño las tablas donde le ponia 500 a una celda y si el contenido era mayor se estiraba sin problema. Con esto del CSS es genial pero uno se vuelve loco para lograr lo mismo.

Gracias por su ayuda de antemano amigos.

[Triby]

Propiedad min-height:medida; Aunque algunas versiones de IE no saben como trabajarla, pero ya nos contaras si te sirve.

[Dariusss]

Si por eso. Si te pudiste ver el link... veras lo que pasa. El CSS comienza asi

Código:

#shadow {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/shadow.jpg);
	background-repeat: repeat-y;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
.shadow {
	width:1000px;
	min-height:800px;
	height:auto;
}
/* for Internet Explorer */
/*\*/
* html .shadow {
	height: auto;
}
/**/
#Wrapper {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	display: inherit;
	height: auto;
}
.Wrapper {
	width:1000px;
	min-height:800px;
	height:auto;

Parece que funcionara pero cuando una capa supera el espacio minimo, este no aumenta. O sea es como si lo hubiera dado una medida fija. Mi pregunta es Como darle a un Div la propiedad de alargarse segun su contenido? Me esta pasando en otras secciones donde tengo capas dentro de otras y al meterle contenido a estas ultimas como que son independientes y no hacen crecer a la que los contiene.

Tendra que ver algo con la propiedad de float? o que puede ser?

[Triby]

Tal vez sea por esto:

Código:

#Content-portfolio {creativeweb.css (línea 298)
background-image:url(../images/bigportfolio.jpg);
background-position:left bottom;
background-repeat:no-repeat;
float:left;
height:500px;
width:960px;
}

El contenido no puede crecer mas alla de los limites aplicados al "contenedor padre". Por cierto, height:auto; no es necesario, ya que el comportamiento por defecto es adaptar la altura al contenido.

[Dariusss]

Gracias por la ayuda Triby! ... pero no se... le quite el height:auto y sigue haiendo lo mismo. No se que estoy haciendo mal.

Saludos!

[Triby]

Elimina el height:500px; de #Content-portfolio, con eso podras avanzar un poco mas.

Como sugerencia adicional, corrige los errores que tienes de HTML y CSS, usando los validadores
xHTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/

[kseso?]

Las capas cajas contenedoras que se sacan del flujo del html como sucede cuando se "flotan" no hacen crecer a su padre. Para que crezca hay que o bien añadir un "div" antes de cerrar el padre que haga el corte (clear:both) o bien, darle al padre la propiedad: "hoverflow: auto || hidden". Pero si tienes definida unas medidas, eso provoca que aparezcan las barras de scroll.

No se si eso te arreglará el entuerto, no vi tu página.
Un saludo

[kseso?]

Bueno, si haces lo anterior, te vas a encontrar con unas pequeñas sorpresas por el uso de la posición absoluta y otras cosillas.

Intenta corregirlas por tí antes de seguir leyendo

Código css:

#shadow {/*creativeweb.css (línea 3)*/
background: url(../images/shadow.jpg) repeat-y;
height:auto;
margin:0 auto;
overflow:hidden;
position:relative;
width:1000px;
}
 
/* Y #foot lo tienes nombrado 2 veces en el css */
 
#foot {/*creativeweb.css (línea 106)*/
background-color:#000000;
height:65px;
margin:10px auto 0;
position:relative;
text-align:center;
width:960px;
}
.foot {/*creativeweb.css (línea 120)*/
border-top:1px solid #CCCCCC;
clear:both;
color:#666666;
font-family:"Lucida Grande","Lucida Sans Unicode", Arial, Verdana, sans-serif;
font-size:10px;
padding: 10px 0;
}
 

Quizás lo anterior te produzca algún pequeño descuadre en otro elementos. No he mirado detenidamente el resto de la página.
Un saludo

[Dariusss]

Mil gracias! con esos ultimos comentarios encontre el error. Saque muchos float y se soluciono el tema. De nuevo... muchas gracias!


EDITO: Perdon... se soluciono esa pagina larga pero ahora lucho con la portada y las demas paginas cortas.