El sitio esta estructurado asi:
Código PHP:
<div class="page">
<div class="header"></div>
<div class="main">
<div class="content"></div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
</div>
De que forma puedo hacer para que la capa main cresca junto a la del contenido? para asi completar el fondo hasta el footer de la pagina?
PD: Esto solo me ocurre con Firefox (con quien veo todas mis paginas), sin embargo con IE7 el fondo se repite sin problema hasta el final...
Aqui dejo el codigo completo de lo que llevo hasta ahora
Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
body {
margin: 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color:#FF9933
}
.page {
width: 780px;
margin: 0px auto;
}
.header {
width: 780px;
height: 150px;
background-image: url(images/_Desing4_01.png);
background-repeat: no-repeat;
background-position: top;
}
.main {
width: 780px;
background-image:url(images/_Desing4_07.png);
background-repeat: repeat-y;
background-position: top;
}
.content {
width: 530px;
margin-left: 30px;
float:left;
padding-top: 10px;
border: 1px solid #000000;
}
.sidebar {
width: 160px;
margin-right: 30px;
padding-top: 10px;
border: 1px solid #000000;
float: right;
}
.footer {
height: 53px;
width: 780px;
background-image:url(images/_Desing4_08.png);
background-position: top;
background-repeat: no-repeat;
clear: both;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
</div>
<div class="main">
<div class="content">
TEXTO<br>
TEXTO<br>
TEXTO<br>
TEXTO<br>
TEXTO<br>
TEXTO<br>
</div>
<div class="sidebar">
menu 1<br>
menu 2<br>
menu 3<br>
menu 4<br>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Mode Lineal
