alinhar top e bottom div dentro de div

[julianens 0]

olá, estou fazendo um blog e tenho 2 colunas para os posts.

uma coluna para a imagem e outra coluna para o conteúdo dos posts.

 

queria saber se tem jeito de criar duas div dentro da div do conteúdo:

uma para título+texto - alinhadas em cima.

e outra como se fosse um footer do post para autor + comments - alinhadas em baixo.

 

 

 

 

 

tem algum commando de css que alinha sempre embaixo?

 

 

alguém pode me ajudar?

[William Bruno 1501]

Veja sobre os positions.

Com uma combinação de relative, absolute.. e paddings, você consegue esse efeito.

 

as alturas da coluna de foto, e da coluna de conteudo, são sempre iguais assim mesmo ?

[julianens 0]

a única coisa que não tá dando certo é alinhar esse div em azul que eu chamei de .postfooter:

 

tenho isso:

.postfooter { height:40px; width:220px; float:left; background-color: #f6f6f6; position: relative; }

 

se coloco position: absolute; todos os posts da pagina ficam na mesma posiçao no final da página.. sendo que o que eu quero é que fica cada um alinhado dentro do seu post.

[William Bruno 1501]

Então.. você tem um bloco para cada post?

Joga eles com relative.

E o .postfooter com absolute, e bottom: 0;

 

Ai cada .postfooter, vai ficar no bottom do teu próprio bloco de post.

[julianens 0]

Sim, cada post tem essa mesma estrutura.. uma foto com o conteúdo do lado. Exatamente como essa foto que mandei.

Só não estou conseguindo alinhar o postfotter embaixo na segunda coluna... ele não alinha.. ele aparece sempre logo abaixo do texto do post. nunca fixo lá embaixo.

 

O que eu tenho é:

.column1 { font-family: consolas, "Helvetica Neue", Arial, sans-serif; font-size:12px; width:135px; position: absolute; top:25px; left:25px; margin-right:11px; }

.column2 { width:830px; position:absolute; top:173px; left:180px; }

.column2-1 { width:580px; float:left; background-color:#fff; margin-left:10px; }

.column2-2 { width:220px; height:px; float:left; font-family: "Helvetica Neue", Arial, sans-serif; font-size:11px; text-align:left; margin-left:15px; }

.post { width:220px; margin-left:10px; align:top; }
.postfooter { height:40px; width:220px; float:left; background-color: #f6f6f6; -moz-border-radius:10px; -khtml-border-radius: 10px; -webkit-border-radius:10px; position: relative; bottom:0; }

esse column1 é onde está o menu. column2 onde está os posts: column2-1: foto do post; column2-2: conteudo do post.

e é dentro da column2-2 que quero alinhar o título em cima.. que já não precisa fazer muito pq ele já alinha em cima.. e um rodapé em baixo com o autor/data/comments do post.

[William Bruno 1501]

Posta a marcação HTML de um dos posts tb.

Ou um link para o site. Pois assim, fica melhor para testarmos as sugestões.

 

o .post é o container de tudo ne?!

coloque ele com relative.

.post { width:220px; margin-left:10px; align:top; position: relative}

e o .postfooter com um absolute, como eu havia sugerido

.postfooter { height:40px; width:220px; float:left; background-color: #f6f6f6; -moz-border-radius:10px; -khtml-border-radius: 10px; -webkit-border-radius:10px; position: absolute; bottom:0; }

[julianens 0]

.post é container para título e texto do post.

 

 

se coloco position:absolute no postfooter.. todos eles ficam no fim da página.. um em cima do outro.. ao invés de ficar do lado inferior direito da foto e embaixo do título+texto.

 

html:

 

<div class="column2">

<div class="column2-1">
<img src="/images/5.png" width="580" height="400" alt="" /></a>
</div>

<div class ="column2-2">

<span class="posttitle"><a rel="bookmark" href="/index.php?id=11">nononon onon</a></span>
<span class="content"><span class="bloglink">
	<p>noasnodnon on onosnaod naon oandoansdo naono nodnaonondon onoan onsdo nasono naosdn osnd oanodnoadnonoando anonodsnono nosdn o non on onon ono nonono non ononono non onono no.</p>
</span></span><br />

<div class="postfooter"><div class="postfooter-text">
<span class="smaller"><br />post by nonono / Feb 11, 2009</span>
<br />
<div class="comments">
<a href="/index.php?id=11#comment"  class="comments_invite">comentários</a> [3] </div>
</div>
</div>
</div>

[diegoleite.com 0]

Tente colocar o postfooter como clear:both no css

[Leonardo Gazio 0]

Valeu rapaziada! Entrei de gaiato aqui com essa mesma dúvida do autor e me ajudou bastante. Abc.

[l1p3 2]

tenta usar um

float:left;

 

ai como num vai ter espaço pra flutuar, ele vai aparecer em baixo

me ajude também

http://forum.imasters.com.br/topic/491089-css-na-textarea/

ignora minha ultima resposta e faz o seguinte...

 

Faz a sua div principal ai com position absolute, e as que estão dentro dela também, ai a div que vc ta usando como principal que abriga a parte amarela e a parte azul, você faz uma div antes dela com position relative (sendo pai da div cinza, a amarela e a azul)