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

Html – How to align div element to the right above another div element?

I’ve got a code for a dialogue box in a game I’m working on and I’m trying to figure out a way to move the name tag to the right of the box rather than on the left as it is by default for when I have two characters exchanging dialogue in one scene.

The first .name class works just fine. It’s the .name2 class that I’m having issues with. When I use float:right; it causes the name tag to display inside of the dialogue box instead of above it.

Here’s a ss of the regular, working .name class: https://i.imgur.com/RnczbHG.png
And here’s what the .name2 class looks like: https://i.imgur.com/qbxFjCS.png

Basically I just want the name tag to slide to the right. When I try to add a margin-top to the .name2 class, it pushes up the name tag but that just shoves it up behind the top of the screen as shown here: https://i.imgur.com/UXWfTZP.png

.name {
  position:relative;
  display:inline-block;
  margin-left:15px;
  font-family:"Syne Mono", monospace;
  font-weight:bold;
  font-size:22px;
  text-transform:uppercase;
  color:#111;
  background-color:#d90254;
  padding:7px 9px 5px 9px;
  border-radius:5px 5px 0 0;
  z-index:2;
}

.name2 {
  position:relative;
  display:inline-block;
  float:right;
  margin-right:15px;
  font-family:"Syne Mono", monospace;
  font-weight:bold;
  font-size:22px;
  text-transform:uppercase;
  color:#111;
  background-color:#d90254;
  padding:7px 9px 5px 9px;
  border-radius:5px 5px 0 0;
  z-index:2;
}

#dialogue {
  text-align:left;
  border:3px solid #d90254;
  border-radius:10px;
  padding:15px 20px;
  color:#fff;
  text-shadow:0 0 10px #ff0037;
  background-image:linear-gradient(#7d003f, #1B0034);
  width:100%;
  height:145px;
  letter-spacing:1px;
}
<div class="name2">madara</div>
<div id="dialogue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie nisi nunc, ac porttitor ex dictum at.</div>
Tags:

2

Answers


  1. 0

    You can use float if you remember to clear the floating by adding <div style="clear:both"></div> after the floated element.

    Also, you might consider having some sort of a wrapper around each dialog, just so that it would be one element.

    .name {
  position: relative;
  display: inline-block;
  margin-left: 15px;
  font-family: "Syne Mono", monospace;
  font-weight: bold;
  font-size: 22px;
  text-transform: uppercase;
  color: #111;
  background-color: #d90254;
  padding: 7px 9px 5px 9px;
  border-radius: 5px 5px 0 0;
  z-index: 2;
}

.name2 {
  margin-right: 15px;
  float: right;
  background: blue;
}

#dialogue {
  text-align: left;
  border: 3px solid #d90254;
  border-radius: 10px;
  padding: 15px 20px;
  color: #fff;
  text-shadow: 0 0 10px #ff0037;
  background-image: linear-gradient(#7d003f, #1B0034);
  width: 80%%;
  height: 50px;
  letter-spacing: 1px;
}
    <div class="name name2">madara</div>
<div style="clear:both"></div>
<div id="dialogue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie nisi nunc, ac porttitor ex dictum at.
</div>

<hr>

<div class="name">madara</div>
<div id="dialogue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie nisi nunc, ac porttitor ex dictum at.
</div>
    Login or Signup to reply.
  2. 0

    Personally I would work with an absolute positioned element, but as the earlier reply mentioned, working with a float should work as well. Indeed, don’t forget to clear: both it…

    HTML

    <div class="dialogue-box">
    <p>Some dialogue of the character</p>
    <div class="character-name">Madara</div>
</div>

    CSS

    .dialogue-box {
    position: relative;
}

.character-name {
    position: absolute;
}

.initiator {
    left: 0; /* you can adjust */
    top: 0; /* you can adjust */
}

.replier {
    right: 0; /* you can adjust */
    top: 0; /* you can adjust */
}

    The .initiator and .replier can be used to have a top-left aligned name, or a top-right aligned name.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search