CODEWITHSUNDEEP
htmlcss
skholm
skholm

Reputation: 15

Img showing below div instead of in div?

So I've been trying to make a chatroom, and i want admins to be able to delete messages. I have made an img tag which should be inside and in the right side of the div, but its under and to the right side of the div. How should i do that?

HTML Code (snippet was weird, so try in a regular html file)

<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
    <div style="width: 95%;">
        <span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span> 
        <div style="width:100%;"> Chat startet</div>
        <img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;" > <!-- The img that is a problem -->
        <br>
    </div>
    
</div>

Upvotes: 0

Views: 62

Answers (3)

ajobi
ajobi

Reputation: 3116

I believe you are looking for something like this:

<div style="display: flex; justify-content: space-between;">
    <div>
        <span style="color: red"><b>CONSOLE</b></span>
        <span style="color: grey;">3/11 11.28</span> <br>
        <span>Chat started</span>
    </div>
    <img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" height="40px" width="40px" style="opacity: 0.7;">
</div>

This code uses css flexbox to create such positioning. I recommend you look into the flexbox more, as it will solve 90% of your positioning issues for you, and its usage is at the same time way less problematic than usage of floats. You could find more about the topic here: https://internetingishard.com/html-and-css/flexbox/

I would also recommend not to mix your markup and styling, and use css classes to apply styling to your elements instead. It will allow you to re-use styles without lots of duplication as your page gets more complex, and also allow you to keep your markup much cleaner and more readable.

Upvotes: 1

Zohreh Khaghani
Zohreh Khaghani

Reputation: 16

I'm not sure that I got it right, but I guess you need one of these to solve your problem:

<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
    <div style="width: 95%;">
        <span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span> 
        <div style="width:100%;"> Chat startet
            <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
        </div>
        <br>
    </div>
</div>

or

<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
    <div style="width: 95%;">
        <span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
        <span style="float: right;">
            <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
        </span> 
        <div style="width:100%;"> Chat startet</div>
         <br>
    </div>
</div>

If it helps or not, please let me know :)

Upvotes: 0

SoroushOwji
SoroushOwji

Reputation: 123

you should use something like

display: inline-block

for the elements, you want to be in the same row. or you can use something like

display: flex /*or inline-flex */

in the parent, div to do so.

if you decide to use flex you can see a nice guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions