HTML element display in horizontal line

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.


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.


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.

Tags:

Html

Css