The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS - Test Your CSS Skills Number 26

Here is another short quiz (code wise) that can be in two parts due to browser differences. The task this week is similar to the age old image and caption question where following caption text should wrap at the limits of the image and not push wider than the image.

However, I have changed this slightly and the task is to have some heading text that will dictate the width of the box and then the following text should wrap at the limits of the heading.

All will be clear if you look at the attached screenshot "headers.png".

As you can see the header could be one word or ten words and the resulting box is always the width of the header and the text wraps nicely within that box.

You can't just set a different width for each box as the header could be one word or ten words and the same code must work for all boxes.

Part one of the quiz is to make it work for IE8, Firefox 2.0+, Safari 3 and opera 9.2+. The result should be usable in a real life situation and could fit anywhere into an existing page without causing problems.

The second part of the quiz is to get something to work in IE7 and as you can see from the screenshot I have a working example. However the layout in IE7 wouldn't really be useful in real life for a number of reasons but it's a good test all the same. The same rules applies and you cannot approximate the widths of each box because it should work on any variable length header.

Here is the html to use and you cannot change the html in the body but you can of course use whatever css you like.

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">
</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>

As usual there is no scripting allowed and no IE expressions etc. You can use the conditional comments for IE7 only of course. (I was unable to get this to work in IE6 so if you want to be one up on me then make it work there also but I dont think it's possible.)
I am away on holiday from the 3rd - 12th August so please PM your answers to Erik Jand do not post your answers in this thread so that others can have a go without seeing your answers. (You must make sure that it works before you send the PM )

Edit:

Note that Erik can't test FF2 or safari3 but if your design works in FF3 and Safari4 it is also likely to work in the other two also.

Any questions or if anything is unclear just ask and remember this is just for fun

Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes

Didn't really see why you didn't think IE7 would play ball easily...I got it working with like 2 propertiees..I'm close to cracking IE6

Yes the solution you sent is a valid solution for part 2 (IE7 only) of the quiz so well done. Of course the solution is totally unusable in a real situation (just narrow the window on your solution to see why ).

The solution for other browsers will not overlap or interfere with anything else so you still need to solve Part 1 of the quiz.

im with you candlebain.
i love these quizzes too, for their creative and amazing and mostly useful real world application, and they are the only things that actually help me expand my knowledge of css.

but as paul knows css very very well and has experimented with it for a long time, he creates these things mostly by himself, especially if the whole internet claims something is impossible with css, paul makes it his job to figure out how it could be done (and nowadays i do too but to a smaller extent),
or maybe he just stumbled upon something rare in css, and decided to make it into a quiz.

this explains the lack of online references for most of these quizzes.

the point here is to figure it out on your own, possibly creating a new method no one has thought of.

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.

thats good.
hoping to see the results, too bad theres still no real ie6 solution.

With one little expression hack you can turn ie6 and ie7 into a fully working example. The code is actually simpler than before as well.

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:1%;
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{width:auto;}
p{width:1%}
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>

i personally dislike expressions, simply because they are very cpu demanding, and the pc's that have ie6 installed are usually very slow :/

expressions analyze every part that it targets all the time, it does this every time the mouse moves, the screen resizes, or anything happens on the page.
some js parts on some of my websites are relatively demanding and cause enough cpu usage already.

im definitely a performance maniac, to even think about this, so i have read this book here (page 51),
it shows some very nice expressions + javascript alternatives that will make the performance of expressions much better. (even if they do only take milliseconds)

Yes of course expressions are slow and should be converted to external js if speed is an issue. For the demos the expressions work fine but in a busy site they should be converted to js and just called for IE via conditional comments to save other browsers being bothered.

I'm very poor at JS but I guess something like this would do the trick.

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">
#demo div {
padding:5px;
margin:15px 10px;
border:1px solid #000;
background:#809900;
color:#fffccc;
font-weight:bold;
width:1&#37;;
display:table;
min-height:0;
position:relative;
z-index:1;
float:left;
}
#demo div h2 {
white-space:nowrap
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#demo div{width:auto;}
p{width:1%}
</style>
<![endif]-->
<!--[if lte IE 7]>
<script type="text/javascript">
fixwidth = function() {
if (document.getElementById) {
var el = document.getElementById('demo');
var items = el.getElementsByTagName('p');
for (i=0; i < items.length; i++) {
items[i].style.width = items[i].parentNode.offsetWidth-12;
}
}
}
if (window.attachEvent) window.attachEvent("onload", fixwidth);
</script>
<![endif]-->
</head>
<body>
<div id="demo">
<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>
</div>
</body>
</html>