Acoplar capas

delhorno · #1 (**permalink**) 07/02/2012, 13:15

Buenas tardes, disculpad si es muy tonta o facil mi duda pero estoy aprendiendo.

Solo necesito hacer dos cosas, que no consigo hacer:

1º hacer que la capa externa, contenedor, aumente el tamaño de altura según "empujen" los objetos que hay en el interior

2º como se aprecia en la captura, la capa lateral no llega a la altura de la capa contenido y no se como hacerlo, este es el css de la capa lateral:

Código HTML:

#lateral{
	border:solid;
	float:right;
	width:170px;
	padding:20px;
	height:600px;
}

Carlangueitor · #2 (**permalink**) 07/02/2012, 13:18

Ponle overflow: auto a la capa contenedora y quitale el alto.

Saludos

delhorno · #3 (**permalink**) 07/02/2012, 13:37

perfecto muchas gracias, y la capa lateral como la pongo a la misma altura que la de contenido?

Carlangueitor · #4 (**permalink**) 07/02/2012, 13:47

Contenido float:left y la lateral float:right siempre indicándoles su ancho.

Te recomiendo que busques un manual básico de CSS y HTML, esto es lo básico que deberías saber.

Saludos:adios.

delhorno · #5 (**permalink**) 08/02/2012, 09:16

pensaba que por defecto irían a la derecha, como aparecen ahí sin darle formato,.. ahora dandole esa propiedad queda perfecto, pero siguiendo con mi plantilla me encuentro con otra duda, al hacer el div del footer se me posiciona arriba y no siguiendo el flujo de las capas, no se porque? he probado con varios tipos de positions pero no consigo solucionarlo, en la captura he dado borde rojo a la capa footer que quiero que esté debajo siguiendo el flujo pero :(

ryugen · #6 (**permalink**) 08/02/2012, 10:13

el footer tiene la declaración css "clear:both" ?

Carlangueitor · #7 (**permalink**) 08/02/2012, 10:19

@delhorno para poder ayudarte mejor es necesario que pegues el código completo, tanto hmtl como CSS.
Intuyo que le has puesto position absolute, checalo.

Saludos

delhorno · #8 (**permalink**) 08/02/2012, 11:16

Mucha razón y disculpad las molestias, de paso me podeis aconsejar para ir aprendiendo consejos para usar bien los atributos y armar correctamente la estructura.

Código HTML:

Ver original<!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" xml:lang="es-ES" lang="es-ES">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Donde Viajar</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
 
<body>
<div id="estructura">
<div id="header">
<div id="fondo">
<p>
imagen de fondo, titulo del sitio y descripcion</p>
</div>
<div id="menu">
<p>
menu</p>
</div>
<div id="ads_header">
<p>Adsense Horizontal</p>
 
</div>
</div>
<!--fin header -->
 
<div id="contenido">
<p>contenido</p>
</div>
 
<div id="lateral">
<p>lateral</p>
</div>
 
<div id="paginacion">
<p>paginacion</p>
</div>
 
<!--footer -->
 
<div id="footer">
<p>Footer</p>
 
</div>
</div>
 
 
 
</body>
</html>

CSS

Código CSS:

Ver original@charset "utf-8";
/* Reseteando */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
a img {
    border: none;
}
/* Fin reseteando */
 
#estructura {
    width: 940px;
    overflow:auto;
    border: solid;
    margin:auto;
    padding:0 20px 20px 20px;
}
#header{
    border:solid;
}
#fondo{
    height:198px;
    border-top:solid 6px #CC0000;
    border-bottom:solid 1px;
    background-image:url(images/fondo.jpg); 
}
#menu{
    height:40px;
    border-top:solid 1px;
    border-bottom:solid 1px;
}
#ads_header{
    border:solid 1px;
}
#contenido{
    width:660px;
    border:solid;
    float:left;
    padding:20px;
}
#paginacion{
    width:660px;
    border:solid;
    float:left;
    padding:20px;
}
#lateral{
    border:solid;
    float:right;
    width:180px;
    padding:20px;
}
#footer{
    border:solid #C00;
}

andresrr · #9 (**permalink**) 08/02/2012, 13:45

normalmente si pones al footer
float:left
clear: both

deberias de conseguir lo que quieres

delhorno · #10 (**permalink**) 09/02/2012, 05:06

clear: both y fuera problemas, no entendía en cambio de flujo, pero por lo que he leido al usar la propiedad float pasa eso, muchas gracias ryugen, andresrr y Carlangueitor