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](http://i.stack.imgur.com/ePErz.png)

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

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

Answer: 
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

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

```html
<div class="body">
  <img id="full" src="//lorempixel.com/1000/1000" alt="altvalue" usemap="imgmap" />
</div>
```
Use `overflow:hidden` in your div:

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

}
```

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