Solution Time
Thanks for all the entries and after sifting through them I have decided that the winner this week is Rayzur as it was the first entry to satisfy both parts of the quiz.
Well done Ray
I would also like to say well done to Yurikolovsky and Ryan for the different approach to the first part of the quiz.
Eric Watson also solved both parts correctly and finally antitoxic solved part one of the quiz.
Well done to all.
The concept of the quiz is based on an old table trick where you can have a caption under an image and the caption only stretches as far as the image. Here is an old demo of the technique which shows that the effect is easily accomplished using a table but setting the width to only 1px.
A table will expand if pushed and the 1px width will always stretch to accommodate the fixed width content.
To do this for good browsers using CSS we can simply take the same approach and use display:table and set the element to width:1px and the effect is achieved straight away.
If you look at an old demo of mine you will see the techniques in place (and an expression fix for ie6/7 added in also).
As the method only works with browsers that understand display:table then IE7 doesn't get to play ball and part 2 of the quiz was to get something similar for IE7 although as I mentioned it didn't have to be a fully usable solution.
The solution for IE7 was to place the text under the heading absolutely and use left and right co-ordinates based on the parent's width to keep the text within the confines of the header's width.
This works well until you close the window and then the absolute elements will fall on top of other elements so isn't a real world solution unless you have a fixed height to work with and keep the absolute elements controlled.
Here is my original solution which needs very little code to accomplish the effect.
Code:
<!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">
div {
padding:5px;
margin:15px 10px;
border:1px solid #000;
background:#809900;
color:#fffccc;
font-weight:bold;
width:1px;
display:table;
min-height:0;
position:relative;
z-index:1;
float:left;
}
div h2 {
white-space:nowrap
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div p {
position:absolute;
width:auto;
left:-1px;
right:-1px;
margin-top:-1px;
background:#809900;
border:1px solid #000;
border-top:none;
z-index:2;
padding:5px;
}
div {
width:auto
}
</style>
<![endif]-->
</head>
<body>
<div>
<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>
<h2>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>
<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>
The white-space:nowrap on the h2 is another key part of the puzzle as this forces the text not to wrap and therefore allows the heading to push the container wide without wrapping to another line.
SOLUTIONS
Rays Solution:
Code:
<!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>Rayzur-Quiz#26</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
div {
display:table;
width:1px;
float:left;
padding:5px;
margin:15px 10px;
background:#99C;
border:1px solid #000;
color:#000;
font-weight:bold;
}
h2 {
white-space:nowrap;
background:#66C;
height:50px;
line-height:50px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div {
width:auto;
position:relative;
}
p{
position:absolute;
padding:0 5px 5px;
top:55px;
left:-1px;
right:-1px;
background:#99C;
border:1px solid #000;
border-top:0;
}
</style>
<![endif]-->
</head>
<body>
<div>
<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>
<h2>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>
<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>
Yurikolovskys solution - quiz part 1 only:
Code:
<!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>Header width - CSS Quiz 26 - YuriKolovsky - part 1</title>
<style type="text/css">
body {
}
div {
background:#809900;
color:#ffffcc;
border:solid #000 1px;
margin:10px;
padding:7px;
}
div {
float:left;
position:relative;
}
h2 {
white-space:nowrap;
}
p {
display:block;
margin-right:-3000px;/*longer than content*/
width:100%;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
</style>
<![endif]-->
</head>
<body>
<div>
<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>
<h2>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>
<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>
Ryan - Part 2 of quiz only:
Code:
<!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">
* {
margin:0;
padding:0;
}
div {
float:left;
margin-left:10px;
display:inline;
position:relative;
}
h2 {
background:lightgreen;
position:relative;
}
p {
position:absolute;
background:lightgreen;
word-wrap:break-word;
width:100%;
overflow:hidden;
}
</style>
</head>
<body>
<div>
<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>
<h2>This is a small</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>
<h2>This is a small heading MORE MORE MORE MORE</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>
Ryan - Part 1 of Quiz only:
Code:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
float:left;/*shrink wrap*/
background:lightgreen;/*background*/
margin:10px;
}
p {
margin-right:-999em;/*remove from flow and does magic*/
text-align:justify;/*pretty*/
width:100%;/*take up 100% of the width of the div*/
}
h2{white-space:nowrap}
* html div {
overflow:auto;/*degrade for IE6. Still gets text*/
}
*+html div {
overflow:auto;/*degrade for IE6. Still gets text*/
}
</style>
</head>
<body>
<div>
<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>
<h2>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>
<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>
Erik Watson - both parts of quiz and an expression for ie6
Code:
<!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">
div {
margin:10px;
padding:5px;
border:1px solid #000;
background:green;
width:1px;
display:table;
float:left;
}
h2 {
white-space:nowrap;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div {
width:auto;
border-bottom:0;
position:relative;
}
p {
position:absolute;
left:-1px;
right:-1px;
padding:5px 5px 15px 5px;
background:green;
border:1px solid #000;
border-width:0 1px 1px 1px;
}
* html p {
width:expression(this.parentNode.offsetWidth-12);
}
</style>
<![endif]-->
</head>
<body>
<div>
<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>
<h2>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>
<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>
Antitoxic - part one of quiz:
Code:
<!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">
div {
display:table;
float:left;
width:1em;
/*decoration*/
margin-right:2em;
background:#090;
}
div h2 {
white-space:nowrap;
}
</style>
</head>
<body>
<div>
<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>
<h2>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>
<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>
Hope you had some fun and learned something along the way. These techniques can prove useful and if you refer to one of my old demos you can see them all in use.
Look out for the next quiz in a week's time 
Originally Posted by RyanReese
Bookmarks