homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Image one above the other

 4:05 pm on Sep 12, 2011 (gmt 0)

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


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


Here is my code

<div style="height: 465px; width: 996px;">
<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>

Please help!



 4:31 pm on Sep 12, 2011 (gmt 0)

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.


 4:44 pm on Sep 12, 2011 (gmt 0)

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


 5:20 pm on Sep 12, 2011 (gmt 0)

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


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


Is this possible with just css?

Thanks again for your help!


 6:32 pm on Sep 12, 2011 (gmt 0)

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}
img:nth-of-type(n+4) {display:block}


 10:07 am on Sep 13, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved