I am facing challenges in formatting these divs.... I have added borders around the divs to highlight the issue... I am aiming to align these divs similar to the second image, and I am puzzled as to why the top div is not aligning properly. My goal is for it to expand all the way over until it reaches the profile photo div, without increasing its current height. The main message should be able to fit anywhere that is not the profile picture or the name plate. I am confused as to why the chat is overlapping with the nameplate.
If my explanation is unclear, the first image shows the current behavior, while the second image depicts my desired outcome.
Here is the current layout:
https://i.sstatic.net/MvqHg.png
This is the desired layout:
https://i.sstatic.net/B6aOi.png
.chat{
border: 2px solid #73AD21;
font-weight:100;
color:#ffffff;
letter-spacing:0pt;
word-spacing:1pt;
font-size:300%;
text-align:right;
font-family:Helvetica Neue, Helvetica Ultra Light, Helvetica Light, Helvetica, Roboto, Lucida Grande, Tahoma, comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
line-height:1;
margin: 20px;
padding:0px;
opacity:1.0;
position: relative
}
.newChat{
}
.chatBubble{
position: relative;
left:40px;
max-width: 400px;
max-height: 350px;
padding: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
word-wrap: break-word;
height: -webkit-fit-content;
height: -moz-fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
float: bottom;
}
.speechBubble{
max-width:100%;
max-height:100%;
}
html, body, .glass {
width: 100%;
height: 100%;
overflow: hidden;
}
.glass::before {
display: block;
width: 100%;
height: 100%;
background-size: cover;
content: ' ';
opacity: 0.4;
}
.glass {
background: rgba(81, 81, 81, .3);
position: relative;
left:40px;
bottom:0px;
min-width: 200px;
min-height: 75px;
max-width: 400px;
max-height: 350px;
padding: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
word-wrap: break-word;
height: -moz-fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
float: bottom;
margin-bottom:10px;
}
.profilePic{
border: 2px solid #73AD21;
width: 100px;
height: 100%;
left: 0px;
bottom:0px;
float: left;
position: absolute;
}
var thisBubble = $('<div>').addClass('glass').append(
$('<div>').addClass('nameTag').append(fullName)).append(
$('<img src="'+ profilePic +'">').addClass('profilePic')).append(
$('<div>').addClass('chat').append(message)).appendTo('#MenuBackground');
setTimeout(function(){thisBubble.fadeOut('slow');}, 10000);
}
}
.nameTag{
border: 2px solid #73AD21;
font-weight:100;
color:#ffffff;
letter-spacing:0pt;
word-spacing:1pt;
font-size:100%;
text-align:right;
font-family:Helvetica Neue, Helvetica Ultra Light, Helvetica Light, Helvetica, Roboto, Lucida Grande, Tahoma, comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
position: absolute;
top:0px;
right: 5px;
float: top;
}