<p>I have the following div layout:</p>


<img src="https://i.stack.imgur.com/bZSnA.jpg">


<p>Everything is fine when I put normal txt elements in both the blue and the orange div. However, when I place an image in the orange div (which is 31px), the elements in the blue div get pushed down by about half the height of the blue div.</p>

<p>(additional info, when hovering over the html for the orange div in firebug, it seems like only half of the image is contained within it, even though to the naked eye it appears fine).</p>

<p>Would appreciate any help, I'm still a bit rusty on the box model. Thanks.</p>

I'm not so good with CSS boxes, but could adding: display:inline; to the image style fix the porblem? And/Or adding margin:0px;
Oh and is the brwoser rendering in Quirks mode, since not making it render in Quirks mode could fix some problems too.
Edit
By quirks mode I mean, does your page has a DOCTYPE declaration similar to the one below (although you should off course use the corrext DOCTYPE)
```
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
```
more about DOCTYPES here:
http://htmlhelp.com/tools/validator/doctype.html