CSS - Test Your CSS Skills Number 33 :

HTML & CSS
41

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

42

@kevinvs
Paul hosts the quizzes.
he maintains a list here :slight_smile:

43

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.

44

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 :slight_smile:

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 :slight_smile:

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 :slight_smile:

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

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 :slight_smile:

45

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)

46

Thanks Timo :slight_smile:

[SIZE=5][COLOR=Red][B]New Quiz Posted[/B][/COLOR][/SIZE]

47

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)

48

THe point wasnā€™t in creating a stable layout Jason, it was just to overcome teh bug ;).

49

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.:slight_smile: