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

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

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.

Answer 4

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.