I didn't know how to correctly formulate the task of one issue, so if the question is unclear and/or incorrect, I apologize. The task is this:
There is a certain photo, it can be of arbitrary size, and we can't know what.
Under the photo should be a description of the photo (i.e. name of the work, etc.) and the name of the author photo. At the same time - the name is pressed to the left edge of the photo, and the author's name to right. The picture with the description is the heart of the text a great article.
The title and the name of the author:
- can be random length
- random number of rows
aligned at the top
- always within the limits of the image located above
Is it possible to realize this task using only HTML and CSS, considering that it must support all modern browsers and IE8+?
PS I tried to align the blocks completely, but in this case the blocks out of the flow when the number of rows is greater than 1, the tooltip begins to crawl on the text of the article.
Also tried to do the blocks contain the description and author name inline-block, in this case, like all great - but if the description text is too long the name of the author climbs for photo borders. When table-cell is similar to inline-block.
Maybe I'm missing some elementary point of view in virtue of the accumulated daily fatigue. Help if not difficult, with the solution of the problem ) Thank you!