How align 2 super sub div of a sub div in a container div using HTML CSS

user_14341748 0
Viewed 61

I have two queries in a single program.

query1: I am trying to align two sub super sub divisions horizontally inside a sub div of a container div. Below is my code, could you please help me out with this. I have attached the desirable output.

query2: and from the code you can see inside a circle there is a paragraph day, I wanted it to start from the center of the circle such as if the number of days is 1 it should be shown from the center and when there are 3 digit days it should be adjusted in the center. Hope you understand my queries.

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  padding: 5%;
  text-align: center;
  border-color: black;
  border-style: solid;
}
.container-meta {
  position: relative;
}
.container-meta .left {
  float: left;
}
.container-meta .right {
  float: right;
}
.right p,
.left p {
  padding: 0;
  margin: 0;
}
<div class="container-meta">
<div class="left">
<div class="circle">
    <p>days</p>
    <p>hours</p>
 </div>
 <div class="date">
    <p>today-date</p>
    <p>tomorrow-date</p>
 </div>
</div>   
<div class="right">
    <p>text1</p>
    <p>text2</p>
    <p>text3</p>
</div>
</div>

current output:

enter image description here

expected output:

enter image description here

css html
2 Answers

You can do this by giving display:flex; to the left class and by giving some margin to one of divs.

.circle {
  height: max-content;
  width: max-content;
  border-radius: 50%;
  padding: 5%;
  text-align: center;
  border-color: black;
  border-style: solid;
}

.container-meta {
  position: relative;
}
.container-meta .left {
  float: left;
  display: flex;
}
.container-meta .right {
  float: right;
}
.right p,
.left p {
  padding: 0;
  margin: 0;
  width:max-content;
}

.date {
  margin-left: 5px;
}
<div class="container-meta">
  <div class="left">
    <div class="circle">
      <p>days</p>
      <p>hours</p>
    </div>
    <div class="date">
      <p>today-date</p>
      <p>tomorrow-date</p>
    </div>
  </div>
  <div class="right">
    <p>text1</p>
    <p>text2</p>
    <p>text3</p>
  </div>
</div>

user_179765990

Solution1.

I add display: flex at the .leftand margin-right: 10px at .circle.

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  padding: 5%;
  text-align: center;
  border-color: black;
  border-style: solid;
  margin-right: 10px;
}
.container-meta {
  position: relative;
}
.container-meta .left {
  display: flex;
  float: left;
}
.container-meta .right {
  float: right;
}
.right p,
.left p {
  padding: 0;
  margin: 0;
}
<body>
  <div class="container-meta">
    <div class="left">
      <div class="circle">
        <p>days</p>
        <p>hours</p>
      </div>
      <div class="date">
        <p>today-date</p>
        <p>tomorrow-date</p>
      </div>
    </div>
    <div class="right">
      <p>text1</p>
      <p>text2</p>
      <p>text3</p>
    </div>
  </div>
</body>

Solution2.

Using flex instead of float.

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  padding: 5%;
  text-align: center;
  border-color: black;
  border-style: solid;
  margin-right: 10px;
}
.container-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-meta .left {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.right p,
.left p {
  padding: 0;
  margin: 0;
}
<body>
  <div class="container-meta">
    <div class="left">
      <div class="circle">
        <p>days</p>
        <p>hours</p>
      </div>
      <div class="date">
        <p>today-date</p>
        <p>tomorrow-date</p>
      </div>
    </div>
    <div class="right">
      <p>text1</p>
      <p>text2</p>
      <p>text3</p>
    </div>
  </div>
</body>

user_149254490
Related