why text appearing at the bottom of div? - css

Question

I have placed several paragraphs into div element but text are appearing at the bottom of block. What might be the problem? As well would be great if you can suggest how to make the blocks more responsive.
HTML:
<div class="container">
<div class="content">
<div class="inner">
<h1><span>What</span> Clients Says</h1>
<div class="main-block">
<div class="testimonial-block-1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
<p>- Staciya Trollio</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
<div class="testimonial-block-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
<p>- David Soul</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
html, body {
height: 100%;
}
.container {
height: 100%;
background: url(bg.jpg);
min-width: 100%;
background-size: 100%;
font-family: sans-serif;
}
.content {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(16,21,26,.9);
width: 100%;
}
.inner {
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inner h1 {
color: #3170a8;
text-align: center;
}
.inner h1 span {
color: #ee8129;
}
.main-block {
margin-top: 50px;
}
.testimonial-block-1 {
float: left;
max-width: 364px;
background-color: #fff;
min-height: 100px;
margin-right: 45px;
position:relative;
z-index:100;
}
.testimonial-block-1::after,
.testimonial-block-2::after {
position: absolute;
top: 25%;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: solid 20px rgb(255,255,255);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
z-index:2;
}
.testimonial-block-1 img {
position:relative;
right:150px;
}
.testimonial-block-2 img,
.testimonial-block-1 img{
position:relative;
right:150px;
max-width: 107px;
height: 106px;
}
.testimonial-block-2 {
float: right;
max-width: 364px;
background-color: #fff;
min-height: 100px;
position:relative;
left:160px;
z-index:100;
}
.testimonial-block-1 p:nth-child(3),
.testimonial-block-2 p:nth-child(3) {
border-bottom:1px dashed #222;
}
Jsfiddle

Answer 1

Use this for the images, otherwise (if you use position: relative , regardless of the settings) the space they usually occupy will remain reserved for them (i.e. empty) in the container:
position:absolute;
left: -150px;
and create a margin-bottom below the testemonial-blocks:
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
html, body {
height: 100%;
}
.container {
height: 100%;
background: url(bg.jpg);
min-width: 100%;
background-size: 100%;
font-family: sans-serif;
}
.content {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(16,21,26,.9);
width: 100%;
}
.inner {
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inner h1 {
color: #3170a8;
text-align: center;
}
.inner h1 span {
color: #ee8129;
}
.main-block {
margin-top: 50px;
}
.testimonial-block-1 {
float: left;
max-width: 364px;
background-color: #fff;
min-height: 100px;
margin-right: 45px;
position:relative;
z-index:100;
}
.testimonial-block-1,
.testimonial-block-2 {
margin-bottom: 30px;
}
.testimonial-block-1::after,
.testimonial-block-2::after {
position: absolute;
top: 25%;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: solid 20px rgb(255,255,255);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
z-index:2;
}
.testimonial-block-2 img,
.testimonial-block-1 img{
position:absolute;
left: -150px;
max-width: 107px;
height: 106px;
}
.testimonial-block-2 {
float: right;
max-width: 364px;
background-color: #fff;
min-height: 100px;
position:relative;
left:160px;
z-index:100;
}
.testimonial-block-1 p:nth-child(3),
.testimonial-block-2 p:nth-child(3) {
border-bottom:1px dashed #222;
}
<div class="container">
<div class="content">
<div class="inner">
<h1><span>What</span> Clients Says</h1>
<div class="main-block">
<div class="testimonial-block-1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
<p>- Staciya Trollio</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
<div class="testimonial-block-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
<p>- David Soul</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

Try this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
height: 100%;
background: url(bg.jpg);
min-width: 100%;
background-size: 100%;
font-family: sans-serif;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(16, 21, 26, .9);
width: 100%;
}
.inner {
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inner h1 {
color: #3170a8;
text-align: center;
}
.inner h1 span {
color: #ee8129;
}
.main-block {
margin-top: 50px;
}
.testimonial-block-1 {
float: left;
max-width: 364px;
background-color: #fff;
min-height: 100px;
margin-right: 45px;
position: relative;
z-index: 100;
}
.testimonial-block-1::after,
.testimonial-block-2::after {
position: absolute;
top: 25%;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: solid 20px rgb(255, 255, 255);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
z-index: 2;
}
.testimonial-block-1 img {
position: relative;
right: 150px;
}
.testimonial-block-2 img,
.testimonial-block-1 img {
position: absolute;
left: -150px;
max-width: 107px;
height: 106px;
}
.testimonial-block-2 {
float: right;
max-width: 364px;
background-color: #fff;
min-height: 100px;
position: relative;
left: 160px;
z-index: 100;
}
.testimonial-block-1 p:nth-child(3),
.testimonial-block-2 p:nth-child(3) {
border-bottom: 1px dashed #222;
}
<div class="container">
<div class="content">
<div class="inner">
<h1><span>What</span> Clients Says</h1>
<div class="main-block">
<div class="testimonial-block-1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
<p>- Staciya Trollio</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem Ipsum has been the industry.</p>
</div>
<div class="testimonial-block-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
<p>- David Soul</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>
I've changed the position: relative to position: absolute and added a negative left: -150px and removed the right: 150px.

Answer 3

i think this will do the trick, i used display:flex to set everything in the right place i also removed a few of the position:absolute. i believe this will save you a lot of unnecessary code and positioning and will make your code much cleaner.
https://jsfiddle.net/Lsjo988z/3/
html:
<div class="container">
<div class="content">
<div class="inner">
<h1><span>What</span> Clients Says</h1>
<div class="main-block">
<div class="chat-container align-start" >
<div class="row">
<div>
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
</div>
<div class="testimonial-block">
<p>- Staciya Trollio</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
<div class="chat-container align-center" >
<div class="row">
<div>
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
</div>
<div class="testimonial-block">
<p>- David Soul</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
html, body {
height: 100%;
}
.container {
height: 100%;
background: url(bg.jpg);
min-width: 100%;
background-size: 100%;
font-family: sans-serif;
}
.content {
width: 100%;
height: 100%;
background-color: rgba(16,21,26,.9);
}
.inner {
width: 100%;
}
.inner h1 {
color: #3170a8;
text-align: center;
}
.inner h1 span {
color: #ee8129;
}
.main-block {
margin-top: 50px;
}
.chat-container{
display:flex;
flex-wrap:wrap
}
.row{
display:flex;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
flex-direction: row;
}
.align-start{
justify-content: flex-start;
}
.align-center{
justify-content: center;
}
.img{
max-width: 107px;
height: 106px;
}
.testimonial-block {
width:290px;
margin-left:43px;
//float: left;
max-width: 364px;
background-color: #fff;
min-height: 100px;
//margin-right: 45px;
position:relative;
z-index:100;
}
.testimonial-block::after {
position: absolute;
top: 25%;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: solid 20px rgb(255,255,255);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
z-index:2;
}
.testimonial-block-1 img {
position:relative;
right:150px;
}
.testimonial-block p:nth-child(3) {
border-bottom:1px dashed #222;
}
for more information about display flex abilities you can read this really good explanation https://css-tricks.com/snippets/css/a-guide-to-flexbox/