HTML element display in horizontal line

Question

I have two HTML elements inside a div. I want to display them in a row or a horizontal line. Let's say I have two images with the code shown below. How would I make it so there is no line break after the first element so they will be displayed one after the other horizontally. Right now the second image is displayed below the first. I want the second image to be displayed to the right of the first. I am pretty sure this can be done in CSS. Please Help.

<img src="image one.jpg">
<img src="image two.jpg">

Answer 1

Option 1

img {
 display:inline;
}

Option 2

img {
 display:block;
 float:left;
}

Updated to reflect current browser capabilities

Option 3

img {
 display:inline-block;
}

However, this will only work if there is enough horizontal space for the images in question.

Answer 2

The hack is to set position: relative; on the parent div and

position: absolute; 
top: 0px; 
left: {left image's computed width}px; 

on the second one. Other wise you simple increase the div size.

Answer 3

The image elements are inline elements, so they display horizontally, unless you changed the "display" CSS rule. I think you don't have enough space for them to fit horizontally.

Answer 4

You can do this with CSS (position attribute) or with a table. It will not have a line break by default unless the pictures are too wide to fit on one line. In that case, it is questionable design to force them to be on the same line.