Html Question posted in
Some basic documentation can be found here.

Html – I want two divs to move dynamically with one another

I have a sentenced with a solid border around it. When I the sentence, the border changes, adjusting to fit the sentence. I also have a pink circle. I would like the pink circle to be in the top right corner of the border around the sentence no matter the length of the sentence – I want the circle to move dynamically with the border.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width,initial-scale=1">
    <title>Family Tree Creator</title>
    <link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>

        <div class="nameone">Core water is soooo good!!</div>
        <div class="circleone"></div>

</body>
</html>

.nameone {
  border: 3px solid darkgray;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  padding: 15px;
}

.circleone{
  border: 3px solid pink;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}

Website Image

I’m new to css and html so I tried several variations of placing s inside of one another but nothing

Tags:

2

Answers


  1. 0

    I would apply flex to the container (in your example body, but I recommend to create a seperate container div), with the usual settings for centering its only child (see below).

    Then apply position: relative to .nameone to make it act as the position anchor for the absolutely positioned .circleone div which you have to move inside the .nameone div to be its child, with top and right settings as below to place the circle into the top right corner of its parent:

    body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.nameone {
  border: 3px solid darkgray;
  position: relative;
  padding: 20px;
}

.circleone {
  position: absolute;
  border: 3px solid pink;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  top: 2px;
  right: 2px;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewpoint" content="width=device-width,initial-scale=1">
  <title>Family Tree Creator</title>
  <link href="Style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="nameone">Core water is soooo good!!
    <div class="circleone"></div>
  </div>
</body>

</html>

    Another solution would be to create the circle by adding a pseudo element (.nameone::after) in CSS with very similar settings as above, but without the circle div in the HTML code:

    body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.nameone {
  border: 3px solid darkgray;
  position: relative;
  padding: 20px;
}

.nameone::after {
  content: "";
  position: absolute;
  border: 3px solid pink;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  top: 2px;
  right: 2px;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewpoint" content="width=device-width,initial-scale=1">
  <title>Family Tree Creator</title>
  <link href="Style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="nameone">Core water is soooo good!!</div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    Taken two screenshots with different text. Guess this is what you wanted

    Create a separate <div> for the text and place it inside the class .nameone. Place the circle’s div i.e the class .circleone before the text div. And style the class .circleone as float:right in css. Add <div style = "clear:both"></div> after the class .circleone in html.

    For testing purpose, I’ve added the css inside the tags. You can remove it; place it in a separate css file and modify according to your requirement:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width,initial-scale=1">
    <title>Family Tree Creator</title>
    <link href="Style.css" rel="stylesheet" type="text/css">
    <style>
    .nameone {
  border: 3px solid darkgray;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  padding: 15px;
}

.circleone{
  border: 3px solid pink;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  float:right;
}
</style>
</head>
<body>

        <div class="nameone">
        <div class="circleone"></div>
        <div style = "clear:both;"></div>
        <div>Core water is soooo good!Core water is soooo good!</div>
        </div>
        

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search