Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ulfreitas

estender colunas e posicionar rodape

Por , em Desenvolvimento frontend

Recommended Posts

ulfreitas    6

ulfreitas
Postado

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;

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito