I need to align this div that is misaligned as shown below:
Note: I want to align side by side because the top div is misaligned because of the larger text - I'm using bootstrap.
CSS:
.edufair-blog-overlay{position:relative;background:#000;display:inline-block;}.edufair-single-blog{padding-bottom:60px;display:inline-block;}DIVhtmlstructure
<divclass="row">
<?php
if(count($cursos) > 0){
foreach($cursos as $valor){
?>
<div class="col-md-4">
<div class="edufair-single-blog">
<div class="edufair-blog-overlay">
<img src="<?php echo base_url('admin/assets/uploads/'.$valor->imagem); ?>" alt="<?php echo $valor->titulo; ?>" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="<?php echo base_url('curso/detalhes/'.$valor->id.'/'.url_title($valor->titulo))?>" class="">
<h3><?php echo $valor->titulo; ?></h3>
</a>
<span><?php echo $categ[0]->titulo; ?></span>
<p class="text-justify"><?php echo $valor->referencia; ?></p>
<div class="blog-footer">
<a href="<?php echo base_url('curso/detalhes/'.$valor->id.'/'.url_title($valor->titulo))?>" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<?php
}
} else {
?>
<div class="col-md-12">
<h3 class="text-center">Nenhum curso disponível nesta categoria.</h3>
</div>
<?php } ?>
</div>
Browser code rendered:
<div class="row">
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Informatica-Basica.png"alt="Informática Básica" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/5/informatica-basica" class="">
<h3>Informática Básica</h3>
</a>
<span>Informática</span>
<p class="text-justify">Neste curso você aprenderá os conhecimentos básicos e indispensáveis para o uso do computador, desde o trabalho com arquivos de textos, planilhas eletrônicas, apresentação de Slides e a utilização da Internet.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/5/informatica-basica" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Informatica-Avanada.png"alt="Informática Avançada" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/6/informatica-avancada" class="">
<h3>Informática Avançada</h3>
</a>
<span>Informática</span>
<p class="text-justify">Neste curso, o aluno irá conhecer a história do computador, as partes comuns de um computador e seus dispositivos. </p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/6/informatica-avancada" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Infomarica-Basica-e-Avanada.png"alt="Informática Básica & Avançada" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/7/informatica-basica-avancada" class="">
<h3>Informática Básica & Avançada</h3>
</a>
<span>Informática</span>
<p class="text-justify">Neste curso, o aluno irá aprender tanto os conhecimentos básicos da informática como usar o computador, desde o trabalhar com arquivos de textos e etc.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/7/informatica-basica-avancada" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Excel-Avanado.png"alt="Excel Avançado" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/8/excel-avancado" class="">
<h3>Excel Avançado</h3>
</a>
<span>Informática</span>
<p class="text-justify">É um programa de planilha eletrônica. A partir dele, é possível formatar e desenvolver planilhas, calcular custos, salários, demonstração de despesas, análise de gráficos, entre muitas outras funções. </p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/8/excel-avancado" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Design-Grafico.png"alt="Designer Gráfico" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/9/designer-grafico" class="">
<h3>Designer Gráfico</h3>
</a>
<span>Informática</span>
<p class="text-justify">Neste curso o aluno aprende a utilizar as mais modernas ferramentas para criar e editar imagens, como também criar logomarcas, cartões de visita, folders, revistas e panfletos. </p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/9/designer-grafico" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Web-Design.png"alt="Web Design" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/10/web-design" class="">
<h3>Web Design</h3>
</a>
<span>Informática</span>
<p class="text-justify">Neste curso o aluno aprende como estruturar e desenvolver um web site e criações de Arquivos para Web.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/10/web-design" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Auto-CAD.png"alt="AutoCAD" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/11/autocad" class="">
<h3>AutoCAD</h3>
</a>
<span>Informática</span>
<p class="text-justify">O AutoCAD é um software para desenho técnico. Ele pode ser usado para desenho de móveis, circuitos eletrônicos, desenho mecânico, tubulações industriais, embalagens, topografia e projetos de construção civil.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/11/autocad" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Desenvolvedor-de-Games.png"alt="Desenvolvedor de Games" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/12/desenvolvedor-de-games" class="">
<h3>Desenvolvedor de Games</h3>
</a>
<span>Informática</span>
<p class="text-justify">Nesse curso o aluno conhecerá diversos recursos utilizados no desenvolvimento de aplicativos, desde o básico até recursos mais avançados.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/12/desenvolvedor-de-games" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Desenvolvedor-de-Programas.png"alt="Desenvolvedor de Programas" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/13/desenvolvedor-de-programas" class="">
<h3>Desenvolvedor de Programas</h3>
</a>
<span>Informática</span>
<p class="text-justify">O curso de Lógica de Programação da FATB tem por objetivo ensinar todos os conceitos fundamentais básicos da lógica de programação. </p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/13/desenvolvedor-de-programas" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Assistente-administrativo.png"alt="Assistente Administrativo" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/14/assistente-administrativo" class="">
<h3>Assistente Administrativo</h3>
</a>
<span>Informática</span>
<p class="text-justify">Atua em grande parte na Gestão e Negócios, nos processos de movimentação e organizações de pequeno, médio e grande porte. manuseia mercadorias e valores monetários.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/14/assistente-administrativo" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Secretariado.png"alt="Secretariado" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/15/secretariado" class="">
<h3>Secretariado</h3>
</a>
<span>Informática</span>
<p class="text-justify">O aluno será capacitados para auxiliar nas atividades administrativas, organizar documentações, emitir relatórios, encaminhar e arquivar documentos, cuidar da correspondência e documentos, auxiliar nos cálculos.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/15/secretariado" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Manuteno-de-Computador.png"alt="Manutenção de Computadores" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/16/manutencao-de-computadores" class="">
<h3>Manutenção de Computadores</h3>
</a>
<span>Informática</span>
<p class="text-justify">Com este módulo, o aluno aprenderá as técnicas de montagem e manutenção de computadores e redes, identificando possíveis problemas e corrigindo-os de maneira eficiente. Assim, o aluno poderá prestar assistência técnica para empresas e pessoas físicas.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/16/manutencao-de-computadores" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="">
<div class="edufair-blog-overlay">
<img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Ingls.png"alt="Inglês" class="edufair-blog-image">
<div class="edufair-blog-middle"></div>
</div>
<div class="blog-content">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/17/ingles" class="">
<h3>Inglês</h3>
</a>
<span>Informática</span>
<p class="text-justify">O inglês é uma das línguas mais faladas no mundo e também é algo determinante em muitas empresas para realizar uma contratação.</p>
<div class="blog-footer">
<a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/17/ingles" class="edufair-course-text">Conhecer</a>
</div>
</div>
</div>
</div>
</div>