IamNOOB IamNOOB - 24 days ago 9
CSS Question

Aligning an element to right in css

I want to align the

ago
class to the right side of the parent div (
card
class).

But
float: right
is not working :(

Here is the code snippet of it:



.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 80%;

max-height: 700px;
}
.card:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container{
position: relative;
padding: 2px 16px;
}
.circled-dp{
width: 40px;
height: 40px;

}
.meta-info{
box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.2);
padding: 2px;
display: inline-flex;

}
.name-card{
margin-bottom: -9px;
position: relative;
margin-top: 10px;
padding-left: 2px;
}
.meta-info p{
margin-bottom: -9px;
position: relative;
margin-top: 10px;
padding-left: 6px;
}
.ago{

}

<!DOCTYPE html>
<html>

<head>
<title>Card</title>
<link rel="stylesheet" href="card.css">
</head>

<body>
<div class="card">
<div class="meta-info">
<img class="circled-dp" src="https://inomics.com/sites/default/files/pictures/picture-95970-1460131169.png">
<h4 class="name-card">Someone</h4>
<p> asked a question </p>
<div class="ago">
<p >1 sec ago</p>
</div>
</div>
<img src="https://material-design.storage.googleapis.com/publish/material_v_4/social.png" style="width:100%;">
<div class="container">
<h4><b>Someone</b></h4>
<p> Question is here</p>
</div>
</div>

</body>

</html>





Thank you For The Help.

Answer

You just need to make couple of small changes to your code

1) Since you have used inline-flex, the meta-info div takes only width of its contents & not the entire width of its container. Hence use display: flex; instead to occupy the entire row width.

2) Next horizontally align only the .ago to the right. You do that using flex by margin-left: auto;

.card{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 80%;

  max-height: 700px;
}
.card:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container{
  position: relative;
  padding: 2px 16px;
}
.circled-dp{
  width: 40px;
  height: 40px;

}
.meta-info{
  box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.2);
  padding: 2px;
  display: flex;

}
.name-card{
  margin-bottom: -9px;
  position: relative;
  margin-top: 10px;
  padding-left: 2px;
}
.meta-info p{
  margin-bottom: -9px;
  position: relative;
  margin-top: 10px;
  padding-left: 6px;
}
.ago{
  margin-left: auto;
}
<!DOCTYPE html>
<html>

<head>
    <title>Card</title>
    <link rel="stylesheet" href="card.css">
</head>

<body>
    <div class="card">
      <div class="meta-info">
      <img class="circled-dp" src="https://inomics.com/sites/default/files/pictures/picture-95970-1460131169.png">
      <h4 class="name-card">Someone</h4>
      <p> asked a question </p>
      <div class="ago">
        <p>1 sec ago</p>
      </div>
      </div>
        <img src="https://material-design.storage.googleapis.com/publish/material_v_4/social.png" style="width:100%;">
         <div class="container">
            <h4><b>Someone</b></h4>
            <p> Question is here</p>
        </div>
    </div>
</body>

</html>

Comments