Search code examples
htmlcssalignmentvertical-alignmentdivide

How to fix my div displacement into alignment?

I finally got my chatbox created (week of work), but now my top chatbox and bottom chatline box are off set? Why is this? I think it is related to margin functions or padding!

body {
  background-color: #6B6B6B;
  background: url(http://wizzfree.com/pix/bg.jpg) fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: Arial;
  color: darkgrey;
  font-size: 14px;
  line-height: .3;
  letter-spacing: .5px;
  margin: 50px;
}


/*............... chatbox ...............*/

.chatbox {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 400px;
  margin-left: -250px;
  /* half width */
  border-radius: 0px 0px 30px 30px;
  background-color: rgba(0, 0, 0, .4);
}


/*... input message ...*/

input[type=text] {
  width: 230px;
  height: 40px;
  border: none;
  outline: none;
  padding-left: 30px;
  font-size: 14px;
  color: lightgrey;
  font-weight: bold;
  font-style: italic;
  letter-spacing: .5px;
  background-color: transparent;
}


/*... bubble containers ...*/

.bubble {
  position: absolute;
  max-width: 200px;
  padding: 10px;
  border-radius: 0px 20px 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.bubble-r {
  position: absolute;
  max-width: 200px;
  padding: 10px;
  border-radius: 20px 0 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.bubble>img {
  position: absolute;
  right: 100%;
  top: 0;
}

.bubble-r>img {
  position: absolute;
  left: 100%;
  top: 0;
  transform: scaleX(-1);
}

.chattext {
  font-family: Arial;
  color: grey;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .5px;
}

.right {
  right: 50px;
}


/*......... crossfade on buttons .........*/

.hover img {
  transition: .3s;
  position: absolute;
}

.nohover {
  opacity: 0;
}

a:hover .hover {
  opacity: 0;
}

a:hover .nohover {
  opacity: 1;
}
<div class="chatbox">
  <!-- emojis list -->
  <div style="background:#2f2f2f;height:42px;display:flex;">
    <a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
        style="margin-left:-20px;"></a>
    <!-- input message -->
    <form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
    <!-- send button -->
    <b style="margin-left:0px;size:16;line-height:2.9;color:dimgray;"><i>Typing...&nbsp;&nbsp;</i></b>
    <a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a>
  </div>

  <!--............... chatlines .................-->

  <div class="chatbox" style="height: 200px;padding-top: 15px;padding-left: 50px;overflow: hidden;">
    <div class="bubble-r right chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
      <div><b>Yummi:</b> Thx your sooo sweet! 😜
      </div>
    </div>

    <div class="bubble chattext" style="margin-top: 45px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
      <div><b>You:</b> how are you do you find your cat? you are so lovely today. what u doing?
      </div>
    </div>

    <div class="bubble-r right chattext" style="margin-top: 120px;"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
      <div><b>Yummi:</b> cool. see u tomorrow...
      </div>
    </div>

    <div class="bubble chattext" style="margin-top: 180px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
      <div><b>You:</b> I trying calling soon ok... maybe later. I was super busy last night.
      </div>
    </div>
  </div>

  <!--...........................................-->

Solution

  • Changes made are :

    1. In chatbox class, set margin-left to -200px.
    2. For the chatbox element (having inline CSS), add margin-left: -225px, and top: 42px in the inline CSS.

    Notice that the elements are aligning at center now. The offset was because of padding in the element (chatbox one with inline CSS)

    body {
  background-color: #6B6B6B;
  background: url(http://wizzfree.com/pix/bg.jpg) fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: Arial;
  color: darkgrey;
  font-size: 14px;
  line-height: .3;
  letter-spacing: .5px;
  margin: 50px;
}


/*............... chatbox ...............*/

.chatbox {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  /* half width */
  border-radius: 0px 0px 30px 30px;
  background-color: rgba(0, 0, 0, .4);
}


/*... input message ...*/

input[type=text] {
  width: 230px;
  height: 40px;
  border: none;
  outline: none;
  padding-left: 30px;
  font-size: 14px;
  color: lightgrey;
  font-weight: bold;
  font-style: italic;
  letter-spacing: .5px;
  background-color: transparent;
}


/*... bubble containers ...*/

.bubble {
  position: absolute;
  max-width: 200px;
  padding: 10px;
  border-radius: 0px 20px 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.bubble-r {
  position: absolute;
  max-width: 200px;
  padding: 10px;
  border-radius: 20px 0 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.bubble>img {
  position: absolute;
  right: 100%;
  top: 0;
}

.bubble-r>img {
  position: absolute;
  left: 100%;
  top: 0;
  transform: scaleX(-1);
}

.chattext {
  font-family: Arial;
  color: grey;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .5px;
}

.right {
  right: 50px;
}


/*......... crossfade on buttons .........*/

.hover img {
  transition: .3s;
  position: absolute;
}

.nohover {
  opacity: 0;
}

a:hover .hover {
  opacity: 0;
}

a:hover .nohover {
  opacity: 1;
}
    <div class="chatbox">
  <!-- emojis list -->
  <div style="background:#2f2f2f;height:42px;display:flex;">
    <a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
        style="margin-left:-20px;"></a>
    <!-- input message -->
    <form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
    <!-- send button -->
    <b style="margin-left:0px;size:16;line-height:2.9;color:dimgray;"><i>Typing...&nbsp;&nbsp;</i></b>
    <a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a>
  </div>

  <!--............... chatlines .................-->

  <div class="chatbox" style="height: 200px;padding-top: 15px;padding-left: 50px;overflow: hidden; margin-left: -225px; top: 42px;">
    <div class="bubble-r right chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
      <div><b>Yummi:</b> Thx your sooo sweet! 😜
      </div>
    </div>

    <div class="bubble chattext" style="margin-top: 45px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
      <div><b>You:</b> how are you do you find your cat? you are so lovely today. what u doing?
      </div>
    </div>

    <div class="bubble-r right chattext" style="margin-top: 120px;"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
      <div><b>Yummi:</b> cool. see u tomorrow...
      </div>
    </div>

    <div class="bubble chattext" style="margin-top: 180px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
      <div><b>You:</b> I trying calling soon ok... maybe later. I was super busy last night.
      </div>
    </div>
  </div>

  <!--...........................................-->

    Let me know in case you need any explanation.