estender colunas e posicionar rodape
Boa tarde pessoal.
Estou tentando montar um site bem simples topo, duas colunas e rodapé, eu estou com dificuldade pois as colunas tem pouco conteúdo o que faz com que as colunas fiquem curtas e o rodapé não chegue até o fim da página:
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="img/logo.gif" alt="Home" /></a></h1>
</div><!-- header -->
<div id="nav">
<ul>
//menu horizontal abaixo do topo
</ul>
</div><!-- nav -->
<div id="corpo">
<div id="colunaEsq">
<ul>
// lista
</ul>
</div><!-- colunaEsq -->
<div id="colunaDir">
<ul>
//lista
</ul>
</div><!-- colunaDir -->
<div id="clear"></div>
</div><!-- corpo -->
</div><!-- container -->
<div id="footer"></div><!-- footer -->
</body>
</html>CSS
/ Reset CSS /
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, em, img, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
}ul, li, ol {list-style:none; text-decoration:none;}
article, header, footer, nav {display:block;}
h1, h2, h3, h4, h5, h6, a {
font-family:'Helvetica', 'Georgia', 'Verdana', 'Lucida', 'Sans-Serif';
display:inline;
text-align:left;
font-weight:normal;
font-style:normal;
font-weight:normal;
text-align:left;
display:inline;
}body {
text-align: center;
background:#EFEFEF url(img/background.gif) repeat-x left top;
}* html #container {height: 100%;}
#container {
min-height: 100%;
width:990px;
position:relative;
margin:0 auto;
text-align:left;
}#clear {clear:both;}
#header {height:120px;}
#header h1 {
background:url(img/logo.gif) no-repeat;
float:left;
height:120px;
width:315px;
}#nav {height: 25px; padding-top:5px;}
#nav li {display: inline; margin-right: 10px;}
#nav li a:link {color: #6A6A6A; font-size: 12px; text-decoration: none;}
#nav li a:visited {color: #6A6A6A; font-size: 12px; text-decoration: none;}
#nav li a:hover {color: #6A6A6A; font-size: 12px; text-decoration: none;}
#corpo {
background:#F8F8F8;
height: 100%;
border: #DCDCDC solid 1px;
margin-top: 0;
padding-bottom: 30px;
}
#colunaEsq {
width: 700px;
padding: 10px 0 0 20px;
float: left;
text-align: left;
}
#colunaDir {
width: 230px;
float: right;
padding: 10px 20px 0 0;
}
#footer {
width:100%;
height:65px;
background:#272C34;
position:absolute;
bottom: 0;
text-align: center;Discussão (1)
Carregando comentários...