Question

I have 5 images and one div with text. Html looks like this:

<div id="title">Title of gallery</div>
<div id="gallery">
    <img src="thumbs/1.jpg"/>
    <img src="thumbs/2.jpg"/>
    <img src="thumbs/3.jpg"/>
    <img src="thumbs/4.jpg"/>
    <img src="thumbs/5.jpg"/>
</div>

I can put my #title inside #gallery if it helps, but not in between images. Only before/after them.

Picture worth more than 1000 words, so here is what I want to achieve:

This is my current CSS for images (nothing more, I’ve just started):

#page img {
    border:none;
    display:block;
    float: left;
    margin: 2px;
}

I’m also using inuitCSS here, so maybe it can help with my problem somehow.

Answer 1

Here’s some CSS shenanigans for you:

http://jsfiddle.net/5qzXV/