Problem positionning icon

[maitrebart]

If you go at this page: http://www.maitrebart.net/exphotos/misc/chezmoi.htm
you’ll see a row of elements (the test set). (Make your browser’s window large enough.)

It is almost exactly as I want except for one little thing: I try to position the small gray icon at the baseline of the image on its left.
In the css file, I use the .outer, .innera, .innerb and .inneri classes.

What ever I tried until now does not succeed. I must be missing something somewhere.
I would appreciate if anyone could tell me how to achieve that.

In extra: In case the user reduces the width of its browser, I would like both the icon and the image to go on the next row, not the icon only. I don’t know if that kind of behavior can be done however.

[maitrebart]

In the mean time I continued to work it out locally in a sandbox and it appears the problem might be the "display: inline;".

The alternative I found is to use "float" but in this case I have to specify the width and height of the parent; which is not an option in my case. I want to leave the layout "free-style" (i.e. one thing after the other) since I don’t want to bother about the size of my elements (e.g. images), while still having the possibility of grouping some elements together and let them behave as one along the stream. It is the kind of thing that was easily achievable using tables before.

I wonder if I’m using div’s for a purpose they were not meant to? Unless there is something I didn’t try with div’s yet?

[maitrebart]

After few days of unsuccessful trials and errors I finally gave up. It appears tables provide me with much better and simpler controls on how I want to align my stuff (free style) than divs can do.

Still I am open to any suggestion.

[TheDoc]

You should really only be using one div per image. It should look as simple as

<div class="gallery-item">
<p>Image Caption</p>
<img alt="" src="images/enlarge-icon.jpg" />
<a href="images/big-image.jpg"><img class="classname" alt="" src="images/thumbnail.jpg" /></a>
</div>

Do some tutorials and really focus in on how floats work, they are pretty hard to wrap your head around when you’re just starting out.

[maitrebart]

"TheDoc" wrote:

You should really only be using one div per image. […]

Sorry for the late reply. Thank you for your suggestion. I will give a try.

[Author]

Posts