Publicado em 13 de mai.

Posicionar 3 div lado a lada horizontal e imagem na vertical

Boa noite pessoal tudo bem.

Estou com o seguinte problema, q na verdade dei um jeitinho rs'. não estou conseguindo posicionar 3 divis lado a lado, para resolver isso tive q colocar float left em todas as 3 divs ai resolveu mas sei q essa não é a maneira correta.
E na terceira div possuo um conjunto de links q são img , e elas não ficam posicionadas no centro vertical da div.

Segue o codigo html:

<article class="post">
 <div class="category">
 <a href="#">Categoria do Post</a>
 </div>
 <!--Category-->
 <div class="agrupapost">
 <div class="ptitulo"><h1>Titulo do post</h1></div>
 <!--Titulo do post-->

 <div class="infoautor">
 Por: <span>Daniele</span> | <span class="cinzamedio">Data: 06/05/15</span>
 <hr />
 </div>
 <!--Info autor-->

 <div class="contentpost">
 <div class="thumbpost">
 <img src="images/imgpostt.jpg" height="281" width="440" alt="">
 </div>
 <!--Tumb Post-->

 <div class="pfooter">
 <div class="pcomment">
 <a href="#"><span>12</span> Comentarios</a>
 </div>
 <div class="leiamais">
 <a href="#">Continue Lendo &gt</a>
 </div>
 <div class="psocial">
 <a href="#"><img src="images/social/facebook.png" height="20" width="20" alt="Facebook"></a>
 <a href="#"><img src="images/social/pinterest.png" height="20" width="21" alt="Pinterest"></a>
 <a href="#"><img src="images/social/twitter.png" height="20" width="20" alt="Twitter"></a>
 <a href="#"><img src="images/social/rss.png" height="20" width="20" alt="RSS"></a>
 </div>
 <!--Leia Mais-->
 </div>
 <!--Footer Post-->
 </div>
 <!--Content Post-->
 </div>
 <!--Agrupa Post-->
</article>

E aqui o CSS:

/---------------POST BLOG--------------------------/
.post{width: 620px;float: left;}
.agrupapost{width: 100%;border: 1px solid #CFD1D9;margin-bottom: 20px;padding-bottom: 10px;}
/ Titulo do Post /
.ptitulo{margin-top: 25px;text-align: center;}
/ Informações do Post /
.infoautor{text-align: center;font-size: 12px;}
.infoautor hr{width: 500px;margin:auto;margin-top: 5px;}
/ Imagem do Post /
.thumbpost{margin-top: 15px;text-align: center;}
/ Descrição / Conteudo Post /
.txpost{margin-top: 15px;margin-left: 20px;color: #232323;font: 14px;}

/Footer Post/

.pfooter{
	width: 100%;height: 35px;
 text-align: center;
 display: inline-block;line-height: 35px;margin-top: 20px;}

/Comentarios/
.pcomment{font-size: 12px;float: left;width: 150px;}
/ Continue Lendo /
.leiamais{margin-left: 85px;width:150px;font-size: 12px;float: left;}
.leiamais a{color: #FF5B00;}
.leiamais a:hover{color: #FF5B00; font: 16px;text-shadow:1px 0px 2px gray;}

/Social/
.psocial{margin-left: 85px;width: 150px;float: left;}
.psocial a {}
/Category/
.category{position:relative;top: 15px;width: 150px;height: 30px;line-height: 30px; text-align: center;background: #FF5B00;margin:auto;}
.category a{color: #fff;}

Discussão (13)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

pedrohsb· 13 de mai.

Olá emilyoly.

Para posicionar divs lado a lado, use a propriedade display: inline-block.

Só não entendi bem a sua última pergunta. Poderia explicar melhor?

Atenciosamente,

Pedro HSB

emilyoly· 13 de mai.

>
Olá emilyoly.

Para posicionar divs lado a lado, use a propriedade display: inline-block.

Só não entendi bem a sua última pergunta. Poderia explicar melhor?

Atenciosamente,

Pedro HSB

Mas eu usei essa propriedade e msm assim tive q colocar float left nas 3 divs.

Sobre a segunda questão , segue uma img para explicar melhor:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/cRQTaJf.jpg&key=de09a70deac75dc4d9f0ed9977e53145b98391259c6e78804d3d0c74cec775b7" alt="cRQTaJf.jpg" />

Como pode ver os icones nao estao centralizados na vertical, nem com margin-top estou conseguindo.

pedrohsb· 13 de mai.

Para seu problema tem várias opções...

A que eu acho melhor para o seu caso é definir line-height.

Se você não achar este o melhor método, confira o link abaixo que explica melhor o alinhamento centralizado na vertical:

:seta: http://www.vanseodesign.com/css/vertical-centering/

Atenciosamente,

Pedro HSB

emilyoly· 13 de mai.

Ainda nao consegui resolver os problemas :(

pedrohsb· 13 de mai.

Nem com line-height?

Define na div que tem os logos das redes sociais line-height: 50px.

Veja como ficou: o texto, ou melhor, as imagens foram para baixo.

Vai fazendo isso até conseguir um resultado satisfatório (aumentando o valor ou diminuindo) :)

Me envia por mensagem privada a captura de tela do resultado.

emilyoly· 13 de mai.

>
Nem com line-height?

Define na div que tem os logos das redes sociais line-height: 50px.

Veja como ficou: o texto, ou melhor, as imagens foram para baixo.

Vai fazendo isso até conseguir um resultado satisfatório (aumentando o valor ou diminuindo) :)

Me envia por mensagem privada a captura de tela do resultado.

Nos outros campos, comentários e continue lendo eu usei o line-heigth normalmente e funcionou, somente nesta div q esta dando problema.

André do Vale· 13 de mai.

Dê margin-top nos links da div .psocial.

E não há problemas usar float para deixar uma div do lado da outra, ok? http://www.w3.org/wiki/CSS/Properties/float

rikaschmitt· 13 de mai.

usa vertical-align:middle nas imagens das redes sociais.

emilyoly· 13 de mai.

>
Dê margin-top nos links da div .psocial.

E não há problemas usar float para deixar uma div do lado da outra, ok? http://www.w3.org/wiki/CSS/Properties/float

Margin top não esta funcionando, como eu disse logo no começo.

E o float me referi que, geralmente pra alinhar as div lado a lado so a a necessidade de colocar float:left em um delas, mas no meu caso tive que colocar nas 3 pra dar certo.

usa vertical-align:middle nas imagens das redes sociais.

Também nao deu certo.

Mas obg por tentarem.

rikaschmitt· 13 de mai.

Geralmente funciona o vertical-align:middle nas imagens quando tem line-height na div, pelo menos pra mim. :upset: :upset:

André do Vale· 13 de mai.

Margin top não esta funcionando, como eu disse logo no começo.

Aplica um display inline-block ou block (se for este, especifique a largura no CSS) nos links, e tenta o margin-top novamente.

emilyoly· 19 de mai.

Então gente, eu comecei do zero todo meu site e talz, e ainda não consegui resolver esse problema de alinhar as div lado a lado. Segue as imagens para melhor entendimento:

Como eu queria que ficasse

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/6xmL5aA.jpg&key=91b0265a0c91260ec149eafbcbe08cc86366fbbf46f5bbac8cbee786ce7d1293" alt="6xmL5aA.jpg" />

Como esta ficando

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/aQwgBhl.jpg&key=2b2446c1bec6f9580785b7ef043fbe06095379d2b4e69a6b1b1852574f527385" alt="aQwgBhl.jpg" />

Segue os códigos :

Index

<div class="pcontent">
 <article class="postp">
 <div class="category">
 <a href="#">Categoria do Post</a>
 </div>
 <!--Category-->
 <div class="agrupapost">
 <div class="ptitulo"><h1>Titulo do post</h1></div>
 <!--Titulo do Post-->
 <div class="infoautor">
 Por: <span>Daniele</span> | <span class="cinzamedio">Data: 06/05/15</span>
 <hr />
 </div>
 <!--Info Autor-->
 <div class="thumbpost">
 <img src="images/FB_IMG_1422550451180.jpg" height="600" width="480" alt="">
 </div>
 <!--Thumb Post-->
 <div class="pfooter">
 <div class="pcomment"><a href="#"><span>12</span> Comentarios</a></div>
 <!--Comentarios-->
 <div class="leiamais"><a href="#">Continue Lendo &gt</a></div>
 <!--Continue Lendo-->
 <div class="psocial">
 <a href="#"><img src="images/social/facebook.png" height="20" width="20" alt="Facebook"></a>
 <a href="#"><img src="images/social/pinterest.png" height="20" width="21" alt="Pinterest"></a>
 <a href="#"><img src="images/social/twitter.png" height="20" width="20" alt="Twitter"></a>
 <a href="#"><img src="images/social/rss.png" height="20" width="20" alt="RSS"></a>
 </div>
 <!--Redes Sociais-->
 </div>
 <!--Footer Post-->
 </div>
 <!--Agrupa Post-->
 </article>
 <!--Article Post-->

 <div class="paginacao">
 <p>Pagina 1 de 100</p>
 </div>
 <!--Paginação-->
 </div>
 <!--Conteudo do Post-->

CSS

.pcontent{width: 69.49152542372881%; float: left;} /Conteudo do Post/
.postp {width: 100%;} /Post Resumidos - Article/
.category{position:relative;top: 15px;width: 20%;height: 30px;line-height: 30px; text-align: center;background: #FF5B00;margin:auto;}
.category a{color: #fff;}
.agrupapost{width: 100%; border: 1px solid #CFD1D9;margin-bottom: 1.250em;}
.ptitulo{margin-top: 1.563em;text-align: center;}
.infoautor{text-align: center;font-size: 0.750em;}
.infoautor hr{width: 80%;margin:auto;margin-top: 0.313em;}/500px% 5px/
.thumbpost{margin-top: 0.938em;text-align: center;}
.pfooter {width: 100%;display: inline-block;}
.pcomment {}
.leiamais {}
.psocial {}
.psocial a {vertical-align: middle;}
/Efeito transparencia Redes sociais/
.psocial img {filter: alpha(opacity:0.5); KHTMLOpacity: 0.5; MozOpacity: 0.5; -khtml-opacity:.50; -ms-filter:"alpha(opacity=50)"; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;}
.psocial img:hover {filter: alpha(opacity:1); KHTMLOpacity: 1; MozOpacity: 1; -khtml-opacity:.1; -ms-filter:"alpha(opacity=100)"; -moz-opacity:1; filter:alpha(opacity=100); opacity:1;}

.paginacao{font-style: italic;
	font-size: 18px;
	color: #888;
	margin-left: 20px;
	text-align: center;}

 Por favor quem puder me ajudar fico muito grata.

emilyoly· 20 de mai.

Já consegui resolver o problema substituindo as div por span.