Putting Div Beside Div

Question

This is my CSS code. There are two divs and two img so one div message is on the left-hand side and div message 2 is on the right-hand side. But it is at the bottom I want it on the left-hand side beside div message.

Thanks!

My HTML code that I used and here is a Snippet of what I tried until now:

 .photo{
         height: 70px;
        width: 70px;
        border: 1px solid white;
        border-radius: 90px;
        position: absolute;
        margin-top: 20px;
        right: 55%;
    }
    .massege2{
         background-color: whitesmoke;
        width: 200px;
        overflow-wrap: break-word;
        border: 1px solid red;
        border-radius: 20px;
        margin-left: 65%;
        min-height: 11%;
        margin-top: 30px;
        font-family: 'Berkshire Swash', cursive;
    }
    .photo2{
        height: 70px;
        width: 70px;
        border: 1px solid white;
        border-radius: 90px;
        position: absolute;
        margin-top: 20px;
        right: 1px;
    }
    .massege{
        background-color: whitesmoke;
        width: 200px;
        overflow-wrap: break-word;
        border: 1px solid red;
        border-radius: 20px;
        margin-left: 10%;
        min-height: 11%;
        margin-top: 30px;
        font-family: 'Berkshire Swash', cursive;
    }

<div class="conversation">
  <div class='massege'>
       <img src='../images/photo.png' class='photo'>
       <p class='date'>2018-Jan-Sun -- 06-18-58</p>
       <hr style='border: 1px solid black'>
       <p>hi</p>
   </div>
   <div class='massege2'>
       <img src='../images/photo.png' class='photo2'>
       <p class='date'>2018-Jan-Sun -- 06-18-58</p>
       <hr style='border: 1px solid black'>
       <p>hi</p>
   </div>
 </div>

Please, can you provide the HMTL into a snippet to let us see it and help? — Calvin Nunes, Jan 15 '18 at 12:08
Would you be able to provide the html you use as well? That might make it easier for people to help you. — Craig, Jan 15 '18 at 12:08
Possible duplicate of [Two divs side by side - Fluid display](https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) — Yasir, Jan 15 '18 at 12:09
2018-Jan-Sun -- 06-18-58

hi

2018-Jan-Sun -- 06-18-58

hi
The Html — Ahmed Shady, Jan 15 '18 at 12:10
@AhmedShady: Your keyboard has some special keys like `,` `.` `-` and so on. Use them and you will be surprised how much better one will understand your sentences! — Clijsters, Jan 15 '18 at 12:22
@Yasir it Looks Like That When adding float left https://imgur.com/a/xWgYN — Ahmed Shady, Jan 15 '18 at 12:40

score 0 · Accepted Answer · answered Jan 15 '18 at 12:56

Your divs are on the separate lines because they have display: block by default. You can set their display property to inline-block to solve your problem. I rewrote your code in a more rational way. It's not necessary to create a new class for every message element or photo element like you did. It leads you to code repetition. You can do it with one common class. HTML:

<div class="conversation">
    <div class='message'>
        <img src='../images/photo.png' class='message-photo'>
        <p class='date'>2018-Jan-Sun -- 06-18-58</p>
        <hr style='border: 1px solid black'>
        <p>hi</p>
    </div>
    <div class='message'>
        <img src='../images/photo.png' class='message-photo'>
        <p class='date'>2018-Jan-Sun -- 06-18-58</p>
        <hr style='border: 1px solid black'>
        <p>hi</p>
    </div>
</div>

CSS

.message{
    /* position: relative lets us position .message-photo elements relative to the .message elements */
    position: relative;
    /* display: inline-block lets us keep the divs on the same line */
    display: inline-block;
    background-color: whitesmoke;
    width: 200px;
    overflow-wrap: break-word;
    border: 1px solid red;
    border-radius: 20px;
    min-height: 11%;
    margin-top: 30px;
    font-family: 'Berkshire Swash', cursive;
    display: inline-block;
}

.message-photo{
    height: 70px;
    width: 70px;
    border: 1px solid white;
    border-radius: 90px;
    position: absolute;
    margin-top: 20px;
    right: 1px;
}

Putting Div Beside Div

1 Answers1