Como já respondido pelo @carlosrafaelgn@carlosrafaelgn, existem várias maneiras de se fazer o que você pretende.
Usei a mesma técnica proposta por ele, e fiz apenas algumas alterações estruturais. Originalmente ia por como comment na resposta já existente, mas ia ficar ilegível, então acabei postando em separado. De qualquer forma, a resposta original já ganhou meu +1.
A diferença basicamente é o uso de tags semânticas no lugar dos div
s, para preservar a estrutura lógica da página independentemente do CSS.
No caso, usei o <p>
para mero texto informativo na segunda linha de texto, mas você pode usar <h2>
se for um subtítulo, por exemplo. O importante é usar a tag que melhor identifica o sentido do conteúdo que lá está.
HTML:
<div id="cab">
<h1>Título do site</h1>
<p>Outro texto</p>
</div>
CSS:
#cab { position: relative;
margin: 0;
padding: 0;
height: 200px; }
#cab h1 { position: absolute;
top: 25px;
left: 25px; }
#cab p { position: absolute;
bottom: 25px;
right: 25px; }
Como usamos tags diferentes para as duas linhas, ficou desnecessário especificar classes, e para isso bastou usar o seletor de descendenteseletor de descendente.
Veja em funcionamento no JSFiddle.