Question

I am unsure on how to fix this..

http://jsfiddle.net/PaDvr/

I’d like the image to be place before the text, not on top of it.

the html:

<div id="photo">
<img style="-webkit-user-select: none" src="http://cdn.androidpolice.com/wp-content/themes/ap1/images/android1.png">
</div>
<div id="text" class="media-body">
    lorem ipsum bla blah...
    </div>​

the css:

#photo{
    border: 1px solid black;
    max-width: 100px;
    max-height: 200px;
    min-width: 266px;
    min-height: 286px;
    position: relative;
    left: 32%;
    top: 23px;
}​

what causes the image to be on top of the text?

Answer 1

There are two problems here. The first is that your max and min width and height settings. The max height of the div should be at least as tall as the image, and taller than the min-height. See it here

#photo {
  ...
  max-height: 404px;
} 

The second is that your relative positioning removes it from the regular document flow. The nature of relative positioning is such that moving it down 23px moves it 23px over whatever happens to be beneath it. One way to offset this would be adding a margin-bottom to the image that is equal to your relative offset. View on JSFiddle

#photo {
  position: relative;
  left: 32%;
  top: 23px;
  margin-bottom: 23px;
} 

Though if you’re just trying to move the image down and over, I’d just use margins instead of relative positioning. View on JSFiddle

#photo{
  ...
  margin-left: 32%;
  margin-top: 23px;
}​