CSS HTML image next to the paragraph - background lost

Question

I would like to place the image next to the paragraph. Unfortunately the background disappears.

My code looks like this:

    <figure class="fig">
       <label>
       <div class="order">23</div>
       <p>Suggested Location for RTD & Basement Box<span class="asterisk">&#42;</span></p>
       <img src="../images/basement_box.png" width="30%"></img>
       <div style="clear:both;"></div>
       </label>
       <br>
       <input type="text" placeholder="Enter your answer">
       <br>
       </figure>

 label {
background-color: #E6EDF2;
padding: 5px;
}

 label img {
 display: inline;
 float:left;
 }

The image shows my problem.

I want the image next to the paragraph without losing the background.

If I put float:left or float:right image is placed quite well, but the background is rolled up to the paragraph only.

The clear:both; option doesn't work either, bringing back everything to the beginning.

How can I place my image, as shown in "good" example?

Look at this post: https://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el — Kuci, Apr 28 '21 at 13:47
best option to handle this is, give overflow: hidden; to the parent of floated items, it will solve your problem — Atul Rajput, Apr 28 '21 at 14:04
Thank you all for these hints I solved it as you can see below. — Geographos, Apr 28 '21 at 14:52

score 0 · Answer 1 · answered Apr 28 '21 at 14:59

0

it's happen because u give your img element display:inline,that makes your image acted like a text,so it's move down,try:

img { display: block; position: absolute; right: 0; }

that's make your image one layer above your text

answered Apr 28 '21 at 14:59

Lorenzo028

17
1
4

Geographos · Answer 2 · 2021-04-28T14:51:44.787

Basing on the hints provided in the comments I've solved finally this issue.

I used the overflow:hidden feature and placed clear:both; at the bottom of my label

<figure class="fig">
<label>
<img src="../images/basement_box.png" width="30%"></img>
<div class="order">23</div>
<p>Suggested Location for RTD & Basement Box<span class="asterisk">&#42; 
</span></p>
<div style="clear:both;"></div>
</label>
<br>
<input type="text" placeholder="Enter your answer">
<br>
</figure>

And CSS

 label img {
 float:right;
 overflow: hidden;
 }

CSS HTML image next to the paragraph - background lost

2 Answers2