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.
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?