How to force this figcaption element to respect its parent's width boundaries

HTML & CSS
1

On this page > http://stones.clickbump.com/trent-reznor-confirms-new-nine-inch-nails-lineup/

The figcaption element (just below the Trent Reznor image within the main content block) breaks out of the figure container (due to its length). When the figcaption text is shorter, the figcaption element stays centered below the figure element as in this example (the Rhianna pic) > http://stones.clickbump.com/rihannas-rolling-stone-cover-shoot/

Any ideas how to get the figcaption to line up properly, regardless of how long it is?

Ideally, I want it to begin text wrap when its length exceeds the width of its parent (the figure element). However, the figure element cannot have a defined width because the size of the featured image it contains is variable.

2

Update: I was able to resolve the issue with:

figure{display:table}
figcaption{display:table-caption;caption-side:bottom}

The key rule here is “caption-side”, which apparently defaults to top, counterintuitive as that may seem :slight_smile:

3

Hi Scott,

Glad you found a solution but I thought it worth to also mention a very old table trick you can apply using css that will have the same effect.


.entry figure {
    display: table;
    width: 1px;
}

You set the display:table element to be 1px wide and as tables always stretch to hold their content the width of the table becomes the width of the largest non wrapping element in that section (your image). This means that all captions will also wrap within the bounds of the image.

It’s a technique used in tables of bygone days :slight_smile:

4

Thanks Paul, I’m testing that out due to the fact that my solution is borked in IE8. However, its forcing the image to a smaller width than it should be (in Chrome and IE8 oddly enough).

Unless you have some suggestions to tweak it, I’m going to revert to my code and handle the IE8 issue in isolation.

5

Hi Scott,

It seems to work in Chrome ok and this cut down version seems to be working.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.figureFeatured {
	display:table;
	width:1px;
	text-align:center;
}
.figureFeatured img {
	display:block;
	float:none;
}
.figcaption {
	display:table;
	clear:both
}
</style>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>
<div itemprop="articleBody" class="entry">
		<figure  style="float:left" class="figureFeatured"><img width="200" height="300" style="margin:5px 15px 10px 0;" itemprop="image" alt="Trent Reznor attends the 83rd Annual Academy Awards in Hollywood" class="alignleft wp-post-image" src="http://stones.clickbump.com/wp-content/uploads/reznor-large-200x300.jpg"> <figcaption class="figcaption">Trent Reznor attends the 83rd Annual Academy Awards in Hollywood</span> </figcaption>
		<p>Trent Reznor has stayed busy in the four years since Nine Inch Nails&#8217; farewell tour. In November, Trent Reznor broke the news to Rolling Stone that the band is working on new material. &#8220;All signs point to yes,&#8221; he said. &#8220;There are some things in the works.&#8221;</p>
		<p>Today on his website, Reznor confirmed he is rebuilding Nine Inch Nails with an almost entirely new lineup, including bassist Eric Avery (formerly of Jane&#8217;s Addiction), guitarist Adrian Belew (King Crimson), keyboardist Alessandro Cortini (NIN), keyboardist Josh Eustis (Puscifer, Telefon Tel Aviv) and drummer Ilan Rubin (NIN, Lostprophets).&#8221; &#8220;Nine Inch Nails are touring this year,&#8221; Reznor writes. &#8220;The first shows will begin this summer, followed by a full-on arena tour of the U.S. this fall and lots of other dates worldwide to follow through 2014.&#8221;</p>
		<p>&nbsp;</p>
		<p><strong>Video</strong>: <a href="http://www.rollingstone.com/music/news/video-trent-reznor-shares-footage-from-nine-inch-nails-final-tour-20110103">Trent Reznor Shares Footage From Nine Inch Nails&#8217; Final Tour</a></p>
		<p>Reznor revived the project while working with the King Crimson guitarist. &#8220;I was working with Adrian Belew on some musical ideas, which led to some discussion on performing, which led to some beard-scratching, which (many steps later) led to the decision to re-think the idea of what Nine Inch Nails could be, and the idea of playing a show. Calls were made to some friends, lots of new ideas were discussed, and a show was booked &ndash; which led to another, which somehow led to a lot of shows.&#8221;</p>
		<p>Reznor has a full plate: his other band, How to Destroy Angels &ndash; his project with wife Mariqueen Maandig, Rob Sheridan and Atticus Ross &ndash; releases its new album March 5th and will tour in April.</p>
		<p>Despite NIN&#8217;s &#8220;Wave Goodbye&#8221; tour, Reznor maintains the band never ended. &#8220;I never said that that wasn&#8217;t going to happen, just that it couldn&#8217;t go on as it was,&#8221; he told Rolling Stone. &#8220;Having a few years doing other things, I&#8217;ve enjoyed [them] and I&#8217;m enjoying doing How to Destroy Angels, and there will be a place for stuff that falls in the Nine Inch Nails column of things. It&#8217;s a different kind of work.&#8221;</p>
</div>
</body>
</html>

IE8 doesn’t seem to like the figure element and if you change it to a div then it magically works. I’m still not sure about these html5 elements on older browsers as they always seem to throw something strange up.

You could wrap the figure in a div and then it works in Ie8 (or change the figure to a div as mentioned above).


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.figwrap {
	display:table;
	width:1px;
	text-align:center;
	float:left;
}
.figureFeatured img {
	display:block;
	float:none;
}
</style>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>
<div itemprop="articleBody" class="entry">
		<div class="figwrap">
				<figure  style="float:left" class="figureFeatured"><img width="200" height="300" style="margin:5px 15px 10px 0;" itemprop="image" alt="Trent Reznor attends the 83rd Annual Academy Awards in Hollywood" class="alignleft wp-post-image" src="http://stones.clickbump.com/wp-content/uploads/reznor-large-200x300.jpg"> <figcaption class="figcaption">Trent Reznor attends the 83rd Annual Academy Awards in Hollywood</figcaption> </figure>
		</div>
		<p>Trent Reznor has stayed busy in the four years since Nine Inch Nails&#8217; farewell tour. In November, Trent Reznor broke the news to Rolling Stone that the band is working on new material. &#8220;All signs point to yes,&#8221; he said. &#8220;There are some things in the works.&#8221;</p>
		<p>Today on his website, Reznor confirmed he is rebuilding Nine Inch Nails with an almost entirely new lineup, including bassist Eric Avery (formerly of Jane&#8217;s Addiction), guitarist Adrian Belew (King Crimson), keyboardist Alessandro Cortini (NIN), keyboardist Josh Eustis (Puscifer, Telefon Tel Aviv) and drummer Ilan Rubin (NIN, Lostprophets).&#8221; &#8220;Nine Inch Nails are touring this year,&#8221; Reznor writes. &#8220;The first shows will begin this summer, followed by a full-on arena tour of the U.S. this fall and lots of other dates worldwide to follow through 2014.&#8221;</p>
		<p>&nbsp;</p>
		<p><strong>Video</strong>: <a href="http://www.rollingstone.com/music/news/video-trent-reznor-shares-footage-from-nine-inch-nails-final-tour-20110103">Trent Reznor Shares Footage From Nine Inch Nails&#8217; Final Tour</a></p>
		<p>Reznor revived the project while working with the King Crimson guitarist. &#8220;I was working with Adrian Belew on some musical ideas, which led to some discussion on performing, which led to some beard-scratching, which (many steps later) led to the decision to re-think the idea of what Nine Inch Nails could be, and the idea of playing a show. Calls were made to some friends, lots of new ideas were discussed, and a show was booked &ndash; which led to another, which somehow led to a lot of shows.&#8221;</p>
		<p>Reznor has a full plate: his other band, How to Destroy Angels &ndash; his project with wife Mariqueen Maandig, Rob Sheridan and Atticus Ross &ndash; releases its new album March 5th and will tour in April.</p>
		<p>Despite NIN&#8217;s &#8220;Wave Goodbye&#8221; tour, Reznor maintains the band never ended. &#8220;I never said that that wasn&#8217;t going to happen, just that it couldn&#8217;t go on as it was,&#8221; he told Rolling Stone. &#8220;Having a few years doing other things, I&#8217;ve enjoyed [them] and I&#8217;m enjoying doing How to Destroy Angels, and there will be a place for stuff that falls in the Nine Inch Nails column of things. It&#8217;s a different kind of work.&#8221;</p>
</div>
</body>
</html>
6

THanks Paul, I may just use jQuery to wrap it in a div on IE8 and below.