5

Okay, this is a weird one to me. Here's the HTML element I'm working with:

LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png

A photo with a caption. Ideally, I'd like it to look like this, through pure CSS:

alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png

The width of the image's parent element needs to be dependent on the image's size.

I can change the markup all I need to. (The text isn't currently in its own div, but it can be if necessary.) Is there any way in CSS to accomplish this? I get the impression that I need to "force" the text to wrap as much as possible (which doesn't seem achievable), or make the whole element's width dependent on just one element and ignore the other (which I've never heard of before).

Is there a real way? Or do I need to use magical Javascript instead? (The JS solution is fairly simple, but fairly lame...)

Matchu
  • 83,922
  • 18
  • 153
  • 160

6 Answers6

3

Check out this great article on the best ways of handling the image-with-a-caption scenario.

Personally this is one of those cases where you gotta suck it up and go with that works.

Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
0

Make the container a table with table-layout:fixed and put the image in the top row. You can also do this with pure CSS using the display:table-* properties (and the IE7-js library for IE6 compatibility).

What table-layout:fixed does is make the table drawing algorithm lock the width of each table column once the width of the first cell in that column is known. The caption will have nowhere to expand to so it will wrap to the width of the image (the first cell).

SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • Trying what you're describing; must be doing something wrong.
    hello world
    hi there guys how are you?
    as sample code seems to render the table as I usually see it - set by its widest column. Anything else I need to define?     – Matchu May 18 '09 at 22:08
  • Its seems table-layout:fixed fails when table width is auto. I came up with a better solution though that works (see my other answer). – SpliFF May 19 '09 at 04:26
0

The table answer would work. Easily. I can't encourage its use but ease-of-use does have merit. I was going to suggest using the clip: CSS property, but I can't get it to work on my local machine (for some reason, though it renders the example at cssplay.co.uk perfectly).

The downside of this is that it probably only works if you define fixed-widths for the containers. I'm sure there must be a way, though. I'll keep looking.

harriyott
  • 10,505
  • 10
  • 64
  • 103
David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

Alright, it looks like there's no simple solution that I can pull off. Thanks for helping me work that out :)

I think that, given how I'll be storing those images, accessing width won't involve constant recalculation. I may just use that server-side magic instead.

Thanks!

Matchu
  • 83,922
  • 18
  • 153
  • 160
0

Here's a solution that probably does not work for you even though it does produce the layout you requested:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<style>
div.a {float: left;
        position:relative;}

div.b {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        text-align: center;
        background-color:gray;}

</style>
</head>

<body>

<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>

</body>
</html>

You see the reason why it is unsatisfactory if you place some content below the div a. It will overlap with the caption, because the absolutely positioned caption did not extend the parent div vertically. It still may work for you if you have enough white space below anyway or you are willing to reserve it.

buti-oxa
  • 11,261
  • 5
  • 35
  • 44
0

I came up with a working and fairly clean solution.

The solution uses a table (or div with display:table if you prefer) and adds a second column to "push" the first cell into the minimum space it really needs. The table can be set to 1px width to stop it growing across the page. I've put together a demo to show this in action:

http://test.dev.arc.net.au/caption-layout.html

Tested and working in IE8, Firefox and Safari/Win

SpliFF
  • 38,186
  • 16
  • 91
  • 120