CSS - Test Your CSS Skills Number 33 : Quiz now ended - solution in post #44
The last quiz was fantastic but was a little complicated for some so this time we are coming down to solve something a lot easier so that all levels can have a go.
In this quiz we are going to solve a real life problem that affects IE7 and IE6 (and is a real pain at times).
If you look at the attachment called “ff-leftandright” you will see the type of display I am looking for. If you then look at the attachment “ie7-leftandright” you will see what a hash IE7 has made of this simple task.
All we have is a parent that is floated to the left but without a width so that it shrinks wraps its content. Then we place a fixed width element such as an image into the mix. Lastly we float two elements, one left and one right to line up with the element above’s side edges.
All is well in all browsers except IE7 and IE6 and the problem is that a right floated element in a width-less left floated parent will stretch the element to 100% width. The effect is ruined in completely in IE7 and the first element is stretched 100% wide but rather more strangely the second and third elements are broken in a different way to the first.
It just goes to show how badly IE7 gets this wrong.
Your task, should you accept, is to duplicate the FF-leftandright screenshot and make it work in IE6 and IE7 and to look exactly the same and have the same capabilities.
You have to use the html that I provide but you can change the css as much as you want (although one answer doesn’t really require much to be changed at all).
There are some rules (there are always rules):
The main thing is that the parent (.wrap) must be floated left and must have no width.
The second main thing is that the fixed width element could be any size that you define but the layout must work without changing anything else. The point being that you cannot float the right element to the left and then use a fixed margin to push it into position.
You can’t change the html except for the css styles.
It must work with variable sizes (such as a dynamic image of varying widths) as shown in my example where the same code works with the three different sized elements.
Scripting, images, expressions etc are not allowed.
If any of the above is unclear then just shout and I will clarify.
I reserve the right to plug loopholes should they arise 
Here is the basic html
<!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">
</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>
[B]
[edit]
[/edit][/B][edit][B]To plug the loophole:
I want you to also be able to change the width and height of those 2 little boxes at the bottom and for the layout to still work without having to change the code again. It has to be automatic.[/B]
[/edit][B]
Remember this is just for fun[/B] and there are no prizes.
Don’t post your answers in this thread but PM with the details instead so that all can have a go.
Have fun.
PS. : In case you missed the other tests you can find them all listed here:
