Como consigo colocar o elemento p colado à parte inferior?

1. Como consigo colocar o elemento p colado à parte inferior?

Ede
ede_linux

(usa Ubuntu)

Enviado em 22/06/2016 - 20:23h

Olá pessoal,

Tenho este código:


<body>
<section>
<h1>The main signboard</h1>
<hr>
<p>footer signboard</p>
</section>
....



section {
border: 1px solid #000;
height: 100px;
margin: 20px auto;
width: 400px;
}

h1 {
background-color: #990000;
color: #FFF;
font-size: 1.2em;
left: -10px;
padding: 5px 0;
position: relative;
text-align: center;
width: 420px;
}

p {
background-color: #990000;
color: #FFF;
font-size: 1.2em;
padding: 2px 0;
position: relative;
text-align: center;
margin: 0 auto;
bottom: 0px;
}

hr {
padding-bottom: 8px;
margin: 0 auto;
border: 0;
}


O resultado é este: http://i.imgur.com/BoQf5JS.png
Para que o elemento p, paragrafo, fique totalmente encostado abaixo, dentro do elemento section, tive que adicionar um elemento hr e mexer no seu padding, margin e border. Essa é a maneira correcta de fazer isso? O que sugerem?

Obrigado


  






Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts