Image one above the other

[damiantaylor]

This must be really easy but I just can't figure out how to do it!

I have an unordered list with 2 small images inside a single list item.
I want the images to appear one above the other. By above I don't mean floated over using z-index, just one above the other, like this

IMAGE1
IMAGE2

At the moment, they just appear side by side, like this

IMAGE1 IMAGE2

Here is my code

<div style="height: 465px; width: 996px;">
<ul>
<li style="list-style: none; position: absolute; top: 0px; left: 0px;">
<img style="float:left; vertical-align:text-top" src="images/image1.jpg" height="165" width="247"></a>
<img style="float:left; vertical-align:text-top" src="images/image2.jpg" height="165" width="247"></a>
</li>
</ul>
</div>

Please help!

[alt131]

Hi damiantaylor, yes this should be easy :)

Images are inline elements (display:inline), which means they will horizontally align themselves along the same "line" if there is enough width for them to fit. Explicitly setting float:left changes the display value, but also tells the images to float left of the following element - which is what the first image is doing.

Removing the float and just setting display:block should do it.

[damiantaylor]

Thanks for the quick reply!
That did the trick :)

[damiantaylor]

Now I need to do something a bit trickier. Is it possible to make the images appear side by side if they are too tall to fit one on top of the other, and one on top of the other if they are able to?

I have a comtainer div that is 465px high and 990px wide.

If IMAGE1 is 465px high and 350px wide, and IMAGE2 is 465px high and 350px wide I'd like them to appear side by side as

IMAGE1 IMAGE2

If I also have IMAGE3, IMAGE4 and IMAGE5 which are all 155px high and 290px wide, I'd like them all to appear like this

IMAGE1 IMAGE2 IMAGE3
IMAGE4
IMAGE5


Is this possible with just css?

Thanks again for your help!

[alt131]

Is this possible with just css?

I think that really depends on how much you want to "automate".

If you already know the dimensions it is possible to class the images. I'd suggest leave the first three at their defaults and class the last two to set display:block. However, if you are supporting modern versions, this could be a great chance to utilise the more advanced selectors [w3.org]. That provides lots of ways to do this - but you might try something like attribute selectors or nth-child/nth-of-type to start:
img[width="?"] {display:block}
or
img:nth-of-type(n+4) {display:block}

[damiantaylor]

I'll give that a try.
Thanks again for your help!