CSS - Test Your CSS Skills Number 33 :

[Paul O'B]

maybe I did miss that, I was thinking that as long as the red box width is defined in a class (or ID) I just needed to call up the class and not needing to know, but I guess your saying I don't even know the name of the class that defines the red box width either

Yes that's right - sorry if it wasn't clear

[bigrasb]

DUH!! ok it just dawned on me, the CSS class in this case wouldn't really exist it would be content in the form of text or image... and it's not even friday yet...

[Paul O'B]

I have another correct solution from jeremyasnyder so well done. It is not the optimal solution that I mentioned before though but similar to a few entries I have had.

For those still trying this try to make sure that nothing is reliant on anything else so that if perhaps the heights of the little boxes were changed check that your solutions will still work and not break.

[Paul O'B]

Another correct solution from poetro so well done.

As mentioned in previous posts It is not the optimal solution that I mentioned before though but similar to a few entries I have had.

[YuriKolovsky]

I had a try this morning, and sent my non optimal solution.
Here hopes I manage to find the optimal one before the solutions come out.

[Paul O'B]

Hi Timo,

Your solution was the one I was looking for so well done. However don't let me stop you looking for other more inventive ways of doing it

[YuriKolovsky]

oh yay!
I will look for a more optimal one for a hour or two more
then i really have to get back to work!! (trying to find a semi dynamic server side cache solution)

[Paul O'B]

Ok - I'll be posting answers tomorrow so anyone still thinking about this has another day before solutions are posted

[RyanReese]

Paul could you wait until more in the eveningish to post the answers? I've been swamped since I've gotten back and I haven't had a chance to fully try this quiz out.

[Paul O'B]

Paul could you wait until more in the eveningish to post the answers? I've been swamped since I've gotten back and I haven't had a chance to fully try this quiz out.

Ok - I'll wait until Friday

[AngelPixel25]

I Cant understand what you mean by "ie7-leftandright" could you please explain?

[paul_wilkins]

I Cant understand what you mean by "ie7-leftandright" could you please explain?

That is the name of the image that the OP attached to the first post.

[RyanReese]

Meh, I just don't have time for this, no matter how fast I get through clients I always get more .. I guess that's not a bad thing though.

Go ahead and post if you were only waiting on me (though AngelPixel25 might be trying now?)

[tshirts]

I have recently started learning the CSS. I hope with in no time I will be with all you guys implementing the questions here.

[kevinvs]

Hey Gary: do you have access to the other 32? I'm interested in trying those.

[RyanReese]

In the first post Paul gives links to all other 32 quizzes

[YuriKolovsky]

@kevinvs
Paul hosts the quizzes.
he maintains a list here
http://www.sitepoint.com/forums/show...9&postcount=26

[resting]

interesting...i'd never had e time to read quizzes until now. but i've got no solution to this. i'm writing this cause i love such quizzes. i think u can make it into a book. thanks Paul for his efforts. shall be waiting eagerly for e solution.

[Paul O'B]

Solution Time.

Ok time to wrap this up and provide explanations.

Thanks to all that took part and nice to see a few new names as well as the regulars. All support is greatly received.

The requirements of the quiz were to get that little red block to the right of that widthless float in IE7 and under as presently the right floated block pushes iE7 to 100% wide.

The solution that I was looking for needed to maintain the flow of the document so those of you that used position:absolute to create the effect were close but no cigar I'm afraid. The problem with absolutely placing the element is that it relied on the left float being present and being the same size or bigger than the element on the right and wouldn't be usable in a real situation. Well done those of you who sent me the absolute solution as I think nearly everyone sent me that first

The real answer was very simple indeed and only needed two minor changes for IE7.

.wrap{text-align:right}
.fr{float:none}

That was all you needed to do

If you are wondering why this works then you have to go back to IE5 and remember that text-align:center on a parent will centre block level children.

This behaviour is still present in IE6 and 7 and what you may not have realised is that if you use text-align:right on the parent then the child block element will align to the right.

<!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>
body {text-align:right}
div {
    width:300px;
    height:300px;
    background:red;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>

So all you need to have two elements in a row is to float the first element and then let the second element align to the right.

Here is the full solution:

<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0
}
.wrap {
    float:left;/* no width allowed*/
    clear:left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
}
.image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
}
.i1 {width:300px}
.i2 {width:400px}
.i3 {width:200px}
.f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
}
.fl {float:left}
.fr {float:right}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap{text-align:right}
.fr{float:none}
</style>
<![endif]-->


</head>
<body>
<div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

Some of you missed that behaviour and instead used the fact that you can turn a block element into an inline-block element by declaring it as inline then applying haslayout. This has the same effect as before in that the element is now subject to the text-align properties and you can align it to the right.

<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0
}
.wrap {
    float:left;/* no width allowed*/
    clear:left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
}
.image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
}
.i1 {width:300px}
.i2 {width:400px}
.i3 {width:200px}
.f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
}
.fl {float:left}
.fr {float:right}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap{text-align:right}
.fr{float:none;display:inline-block}
.fr{display:inline}
</style>
<![endif]-->


</head>
<body>
<div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

Thanks to all that took part: Gary Turner, Rayzur, EricWatson, Ryan, jeremyasnyder, rainmakr, Catharsis, Kingcool68, Poetro and Yurikolvsky (hope I've not missed anyone) .

The Winner IS:

Rayzur

Well done Ray

The quickest Entry and a close second was Gary turner - well done Gary

I chose ray's as the winning entry because the same code worked for all browsers without any hacks or alternative code.

Ray:

<!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=utf-8">
<title>Quiz-33 Rayzur</title>
<style type="text/css">
p {
    margin:0
}
.wrap {
    float:left;/* no width allowed*/
    clear:left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
    text-align:right;/*added this*/
}
.image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
}
.i1 {width:300px}/* cater for any width automatically*/
.i2 {width:400px}
.i3 {width:200px}
.f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
}
.fl {float:left}
.fr {display:inline-block;}/*removed float*/
</style>
 
</head>
<body>
<div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

Gary:

<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0
}
.wrap {
    float:left;/* no width allowed*/
    clear:left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
}
.image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
}
.i1 {width:300px}/* cater for any width automatically*/
.i2 {width:400px}
.i3 {width:200px}
.f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
}
.fl {float:left}
.fr {float:right}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap {
    text-align: right;
    }

.fr {
    display: inline-block;
    float: none;
    text-align: center;
    }

</style>
<![endif]-->
</head>
<body>
<div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

Eric Watson:

<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0;
}
.wrap {
    float:left;/* no width allowed*/
    clear:left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
}
.image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
}
.i1 {width:300px}/* cater for any width automatically*/
.i2 {width:400px}
.i3 {width:200px}
.f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
}
.fl { float:left}
.fr { float:right}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap {text-align:right;}
.fr { float:none;}
</style>
<![endif]-->

</head>
<body>
<div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

Rainmakr:

<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0
}
.wrap {
    float:left;/* no width allowed*/
    clear:left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
}
.image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
}
.i1 {width:300px}/* cater for any width automatically*/
.i2 {width:400px}
.i3 {width:200px}
.f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
}
.fl {float:left}
.fr {float:right}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap {text-align:right;}
.wrap * {text-align:center;}
.fr {float:none; margin:1px 10px 0 0;}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

Catharsis:

<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0
}
.wrap {
    float:left;/* no width allowed*/
    clear:left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
}
.image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
}
.i1 {width:300px}/* cater for any width automatically*/
.i2 {width:400px}
.i3 {width:200px}
.f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
}
.fl {float:left}
.fr {float:right}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap { text-align: right;}
.fr { float: none; }
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

Yurikolovsky:

<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0
}
.wrap {
    float:left;/* no width allowed*/
    clear:left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
}
.image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
}
.i1 {width:300px}/* cater for any width automatically*/
.i2 {width:400px}
.i3 {width:200px}
.f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
}
.fl {float:left}
.fr {float:right}

.fr {
    float:none;
    display:inline-block;
}
.wrap {
    text-align:right;
}
</style>
</head>
<body>
<div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

As an example of the absolute method I will just post one entry at Random but as mentioned above this is not the best way to do this:

Jeremeyasnyder

<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
margin:0;
}
.wrap {
float:left;/* no width allowed*/
clear: left;
border:1px solid #ccc;
padding:10px;
margin:0 0 10px;
background:#f2f2f2;
position: relative;
}
.image {
height:150px;
border:1px solid #000;
background:red;
line-height:150px;
text-align:center;
}
.i1 {width:300px}/* cater for any width automatically*/
.i2 {width:400px}
.i3 {width:200px}
.f {
width:75px;
height:75px;
border:5px solid red;
text-align:center;
margin:1px 0 0;
background:#ffc;
}
.fl {float:left;}
.fr {float: right;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.fr {
float: none;
position: absolute;
right: 10px;
}
</style>
<![endif]-->

</head>
<body>
<div class="wrap">
<p class="image i1">Image</p>
<p class="f fl">Text Left<br>Text Left</p>
<p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
<p class="image i2">Image</p>
<p class="f fl">Text Left<br>Text Left</p>
<p class="f fr">Text Right<br>Text Right</p>
</div>
<div class="wrap">
<p class="image i3">Image</p>
<p class="f fl">Text Left<br>Text Left</p>
<p class="f fr">Text Right<br>Text Right</p>
</div>
</body>
</html>

Well done to all that took part and hope that you find this useful as it has real value in certain situations for IE7. (It could even be used for round corners to stop the 1px jog that you get with absolute elements placed in the corners in IE.)

Remember to fix your sights on a new quiz coming your way very soon

[YuriKolovsky]

Thanks for the quiz Paul, I'm glad we got this one sorted.
(and you don't hate IE6 as much when you can have fun with it)

[Paul O'B]

Thanks Timo

New Quiz Posted

[deathshadow60]

Uhm... You guys know those all break on large font/120 dpi systems in Opera, IE7 and earlier, right?

Just saying... (all you have to do is set the font-size in px or change the box sizes to em)

[RyanReese]

THe point wasn't in creating a stable layout Jason, it was just to overcome teh bug .

[Paul O'B]

Yes as Ryan said the main point was to overcome the bug. In the real world you could use ems and not set a height and it would scale reasonably well within limits.

My version scales reasonably well in IE without the heights set and without changing much else it is but would of course be better in ems.