Wrapped text stretches container

HTML & CSS
1

Hi there,

I’m having some trouble with the CSS on my photography album. You can see the issue here:

http://www.element17.com/travel/europe/autun/

I have changed the background colour to emphasize the problem. You can see that the picture titles that are short enough to be on one line (“Enseigne”, “Vitrail”) are “shrink-wrapped” or whatever you want to call it by the div they’re in.

The titles that are long enough to wrap to two or more lines, though, do not get shrink-wrapped, and instead the div extends to the width of the parent container. I have played with several permutations of the white-space and display tags and have not been able to get the multi-line titles to behave like the single-line ones. What can you suggest?

Thanks!

2

Hi,

If you want only the text to have a background then the background will need to be on the text and not on the container.

e.g.


a.album-tool {
  [B]background:#FFFFFF;[/B]
    font-family: verdana,arial,helvetica;
    font-size: 10px;
  [B]line-height: 1.1;[/B]
    text-decoration: none;


}

Of course that will give uneven line lengths.

In your example the text expands along the line until there is no more room which means that the container will be stretched to 100% before the text can wrap. Once the text wraps the container does not shrink back to content size because it was the text that pushed it wide in the first place so it stays at the limit it was pushed to (some browsers differ on this aspect though).

An alternative using your existing method would be to place a break in the text to create the double line and then the background in the parent will encompass the text but in a neat block unlike the inline method.

I would have though a neater method would be to have a full width background by default and just center the caption.:slight_smile: