IamNOOB IamNOOB - 25 days ago 16
CSS Question

Aligning views div to right

I want to align the

views
div to the right side of the
question-card
block and left of the `ago div.

Layout Demo



.question-card{
margin-left: 20px;
background: rgb(255, 255, 255);
-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 60%;
}
.circled-dp{
width: 40px;
height: 40px;
cursor: pointer;
border: 50%;
}
.profile{
padding: 5px;
display: flex;
}
.ago{
margin-left: auto;
}
.views{
float: right!important;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="post.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<title>Post</title>
</head>
<body>
<div class="question-card">
<img class="img" src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" width="100%">
<div class="profile">
<img class="circled-dp" src="https://drslash.com/wp-content/uploads/2014/11/Android-Studio.png">
<p class="profile-name">Someone</p>
<div class="views"><i class="fa fa-eye" aria-hidden="true"></i><span>100</span></div>
<p class="ago">17-nov-2016</p>
</div>
<hr>
<br>
</div>
</body>
</html>





Thank you.
`

Answer

You have div with css: display: flex; so you can use these properties in appropriate places:

justify-content: space-between;

align-items: center;

.question-card{
  margin-left: 20px;
 background: rgb(255, 255, 255);
     -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
   width: 60%;
}
.circled-dp{
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 50%;
}
.profile{
  padding: 5px;
  display: flex;
  justify-content: space-between;
}
.flex {
  display: flex; 
  align-items: center;
}
.ago{
margin-left: auto;
}
.views{
}
span{
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="post.css">
  <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
  <title>Post</title>
</head>
<body>
<div class="question-card">
<img class="img" src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" width="100%">
<div class="profile">
<div class="flex">
  <img class="circled-dp" src="https://drslash.com/wp-content/uploads/2014/11/Android-Studio.png">
  <p class="profile-name">Someone</p>
</div>
<div class="views flex">
<i class="fa fa-eye" aria-hidden="true"></i>
<span>100</span>
<p class="ago">17-nov-2016</p>
</div>
</div>
<hr>
<br>
</div>
</body>
</html>

Comments