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">
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With