I’m trying to figure out a way to accomplish something that I would think is simple, but is turning out not to be.
I want a single DIV to set its width automatically to the content, and then nest a new DIV inside that with a BUNCH of content that will set its width to the same as the parent (which is to say, automatically to the less content of the parent).
Specifically, I want the first DIV to set its width automatically to the amount of content. This first DIV will contain a short “headline,” such as a movie name.
<div>There Will Be Blood</div>
Then, I want the child DIV to inherit that width and not expand past it. This child DIV will have a bunch of content, a review of sorts.
<div>There Will Be Blood<div>This is where the review will go. I do not want THIS DIV’s width to expand beyond the width of the “headline” DIV, which is set to “auto” to fit the headline.</div></div>
I’m still not sure if this makes sense, so let me know if you need an example.
The more I think about this the more I’m assuming this would require Javascript. I’m not a noob to CSS and I’ve never heard anything at all about doing something like this.
I’ve searched the heck out of Google and can’t find anything except setting a DIV’s width to that of an image contained inside of it.
One way to do this is to use a wrapper div of some sort, set it to the width you want and then fill it with the elements you need to describe the meaning of the content.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>Untitled Document</title>
<style type=“text/css”>
div{
border: 1px solid black;
width: 200px;
}
h1{
font-size: 1.1em;
}
</style>
</head>
<body>
<div>
<h1>There will be blood</h1>
<p>reviews here reviews here reviews here reviews here
reviews here reviews here reviews here reviews here
reviews here reviews here reviews here</p>
</div>
</body>
</html>
A div is a block element and it will (by default) expand to the width of its parent. So I’m not sure if there’s a way to makes its width dependent on its content.
If a headline was long such as “Dr. Strangelove or How I Learned to Stop Worrying and Love The Bomb,” it would wrap if I set a container width. That’s what I do not want.
I want the headline to set the overall width of each DIV content. So, if the headline was “Cloverfield,” the content underneath it would have a width equal to the width of the words Cloverfield.
If, however, the headline was the previously mentioned black and white comedy classic, there would be a lot more room for the content to exist because the headline is so long.
I’m thoroughly convinced now that this is not possible using CSS alone, and I would need Javascript to set the width dynamically. That’s a shame… maybe CSS3 would have something like this?
I’m thoroughly convinced now that this is not possible using CSS alone
You can actually do this for Firefox, Opera, Safari and IE8 very easily with just a couple lines of cSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.test{
padding:5px;
margin:15px 10px;
border:1px solid #000;
background:#809900;
color:#fff;
font-weight:bold;
width:1px;
display:table;
min-height:0;
}
.test h2{ white-space:nowrap}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.test{float:left;width:auto}
</style>
<![endif]-->
</head>
<body>
<div class="test">
<h2>This is a small heading</h2>
<p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
</div>
<div class="test">
<h2>heading</h2>
<p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
</div>
<div class="test">
<h2>This is a much longer heading for testing</h2>
<p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
</div>
</body>
</html>
There is no hope for ie6 or 7 though and you’d need to work out an expression or javascript etc.
In an ideal world I would love this to be a little more compatible across different browsers, but I’m really only starting this website for myself so I’m perfectly cool with this workaround.
Thanks for showing this to me, I had pretty much given up hope that it could be done without using Javascript!
Paul, how does width:1px; contribute to making this display correctly?
It’s an old “table” trick.
Tables will expand their cells to accommodate their content unlike divs which will overflow. We set the table to 1px wide and then force it to the width of the heading text by stopping the heading text from wrapping (white-space:nowrap).
This forces the table to be as wide as that heading text only. The text underneath then wraps within that minimum width.
The CSS display:table works much in the same way as tables do so we have our min-width type of routine.
