How to fix my div displacement into alignment? - html

Question

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... </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>
<!--...........................................-->

Answer 1

Changes made are :
In chatbox class, set margin-left to -200px.
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... </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.