Search code examples
htmlcssalignmentmargindivide

Need to fix my div elements to align lineup?

I'm working on a chatbox and trying to line up all my elements in one single div (code below), but it just breaks and appears under it. Why is this and how to fix it?

Any suggestions or examples would be very welcome.

enter image description here

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: .5px;
}
    .right {
    right:15px;
}
    /*............... chatbox ...............*/
    .chatbox {
    position: absolute;
    width: 500px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0, 0, 0, .4);
}
    input[type=text] {
    width: 240px;
    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 {
    position: absolute;
    max-width:200px;
    padding: 15px;
    padding-top: 0px;
    border-radius: 0px 30px 30px 30px;
    background-color:rgba(0, 0, 0, .3);
}
    /*......... crossfade on buttons .........*/

    .hover img{
    transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}
<!--............ chatbox ..............-->

<div class="chatbox">

<!--........ emojis list ........-->

<div style="background:#2f2f2f;height:42px;"><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:40px;size:16;line-height:2.9;"><i>Yummi is 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 style="height:200px"></div>

Solution

  • Just add a display: flex to your second div, like so:

    <div style="display: flex; background:#2f2f2f;height:42px;">
    <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>