How can I add or insert images into a div which would normally only take text? Also, how can I position both image and text in the block to suit my needs?

Images are inline elements. This means they can be placed anywhere (like inside a paragraph), and they won't create line breaks. If you want to position them, it is sometimes helpful to make them block elements. You can do this by setting the display property in the CSS document.

Let's say we want a certain class of image to be a centered block element. We could do this:

<img src="image/whatever.jpg" alt="whatever" class="centered" />

CSS

img.centered {
     display: block;
     margin: 0 auto;
}

Once you make an image a block-level element it can take on margins in a "normal" way.

Another thing you could do is use images as backgrounds instead of with the <img> tag. Background images can be positioned with %percentages or semantically (top, left center), or with px, or em.

How can I add or insert images into a div which would normally only take text?

Divs can contain anything, not just text.