Estructura CSs

elnoidelcargol · #1 (**permalink**) 28/02/2011, 05:35

hola , tengo una estructura en css ( Header, Menu, Content ) i me gustaria añadir un Footer , pero no hay manera, el footer deberia estar debajo del content , i si el content se hace mas largo ( height ) que el footer baje, es decir siempre este debajo del content.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>Emulating frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="header.css" rel="stylesheet" type="text/css" />
<link href="general.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<link href="footer.css" rel="stylesheet" type="text/css" />
<link href="contingut.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
<div id="header"><img id="logo" src="logo_ctcm.jpg" width="788" height="363"></div>
<div id="sidebar"><ul>
<li>Inici</li>
<li>Qui som ?</li>
<li>Que fem </li>
<li>On som ?</li>
<li>Contacta</li>
</ul></div>
<div id="mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus porttitor leo, id volutpat est pulvinar a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer elit dolor, semper id elementum et, interdum a mi. Sed pellentesque nisi sit amet magna posuere ut porttitor neque elementum. Nulla sodales pharetra metus et fringilla. Curabitur tincidunt odio congue libero ultricies fermentum. Maecenas commodo, erat nec tempor volutpat, massa mauris condimentum massa, quis iaculis eros ante ut mi. Mauris ac nulla lectus. Donec rhoncus, arcu ut mollis aliquam, lacus dolor lacinia quam, sit amet sagittis eros lacus ac mauris. Duis sed lacus at dolor viverra tempus et eu sem. Aliquam ultrices tincidunt laoreet. Donec nibh nunc, venenatis in dictum vel, eleifend sed nulla.




</div>
<div id="footer">sdfasdfasdfasdfasdfasdfas</div>
</div>


</body>
</html>

Código:

body {
background-color: #000
margin-top: 0px;
margin-bottom: 0px;
}

#container {
min-height:60em;
width: 1000px;
margin-right: auto;
margin-left: auto;
padding:10px;
height:755px;
}

#header {
height: auto;
background-color: #333
}

#sidebar {
min-height: 45em;
width: 199px;
background-color: #666;
float: left;
height:auto;
}

#mainContent {
height:auto;
background-color: #999;
float: right;
padding: 26px;
width: 748px;
}
#footer{
background-color:#000;
height:20px;
position:absolute;
margin-top:750px;
}

kseso? · #2 (**permalink**) 28/02/2011, 08:24

Busque información relativa a "limpiar float"