The image is not inside the box

Question

I have a problem were I've set an image inside a box but when I run the program i see that the box doesn't contain the image.

I've tried fixing it and realized that when i take out the align = "left" attribute the problem goes away.

I don't understand why this happens or how to avoid it if someone could explain it that would be great.

You can see the result here

div.body {
  background-color: blue;
  padding: 15px;
  height: auto;
}

<div class="body">
  <img id="full" src="../Photos/controler.png" alt="altvalue" hspace="15" usemap="imgmap" align="left" />
</div>

dippas · Answer 1 · 2016-04-05T21:54:29.450

you need to set (max-)width:100% in img, and don't use html align nor hspace, they are deprecated.

When you use align=left(used in CSS nowadays as float:left) you are taking the element out of normal DOM flow, and placing on the left side of its container, with this content will wrap around the "floated" element

div.body {
  background-color: blue;
  padding: 15px;
  height: auto;
}
#full {
  width: 100% /* or max-width */
}

<div class="body">
  <img id="full" src="//lorempixel.com/1000/1000" alt="altvalue" usemap="imgmap" />
</div>

score 0 · Answer 2 · answered Apr 05 '16 at 21:39

0

Use overflow:hidden in your div:

div.body
{
 background-color:blue;
 padding:15px;
 height:auto;
        overflow:hidden;

}

<div class = "body"> 
  <img id = "full" src = "../Photos/controler.png" alt = "altvalue" hspace = "15" usemap = "imgmap" align = "left"/>
</div>

answered Apr 05 '16 at 21:39

I dont understand why this works, can you elabarate please? – RedBelly Apr 09 '16 at 16:34

score 0 · Answer 3 · answered Apr 05 '16 at 22:23

0

Assuming that you need to have align="left" in there for whatever reason that may be, you can "clear" the parent container by adding width:100%; overflow:auto;

div.body {
  background-color:blue;
  padding:15px;
  height:auto;
  width:100%;
  overflow:auto;
}

answered Apr 05 '16 at 22:23

WillW

185
9

I dont understand why this works, can you elabarate please? – RedBelly Apr 09 '16 at 16:33

score 0 · Answer 4 · edited May 23 '17 at 12:24

0

the float element always destroy its child element height. So the better solution use overflow:hidden or use clearfix hack see What is clearfix? and here

edited May 23 '17 at 12:24

Community

1
1

answered Apr 06 '16 at 05:51

Ismail Farooq

6,309
1
27
47

I dont understand why this works, can you elabarate please? – RedBelly Apr 09 '16 at 16:34
Actualy when ever you use float it will destroy its parent height so we have some hacks to fix this issue i have given link in my ans. you need see this link might you understand – Ismail Farooq Apr 09 '16 at 19:57

The image is not inside the box

4 Answers4