1 Attachment(s)
CSS - Test Your CSS Skills Number 42 - float center revisited
CSS - Test Your CSS Skills Number 42 - Float center revisited: Quiz now ended see solution in #post 36
Important:
Don't post your answers in this thread but PM with the details instead so that all can have a go.
Time for another quiz and we are revisiting a quiz we did a while ago but with some differences. The task is pretty straight forward and should be something that you can complete in your coffee break once you realise how to do it.:)
The task is this:
Using only CSS (no scripting or expressions) the task is to float a fixed height and width image so that it spans two separate columns and the text is displaced accordingly in each column. The columns may be a fixed width or a fluid width but the technique should work for either.
First take a look at the attachment which shows exactly how the elements must look and perform.
Attachment 60339
CSS3 has positioned floats which can accomplish this sort of thing but we are trying to accomplish this so that it works in IE8 and above.
I'm pretty lax on rules as I like to see people thinking out of the box and I will award the winner based on either the best solution or the most innovative or indeed the one that matches the requirements exactly.
Rules
1) Important: The html must remain unchanged . Only add CSS.
2) No scripting allowed but the result must work from IE8+.
Here is the html that you can use with some basic CSS styling.
Code:
<!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">
body { background:#ccc; }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
}
.col1, .col2 {
width:48%;
float:left;
margin:1%;
background:#eee;
}
p {
padding:5px;
margin:0 0 1em;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col1">
<div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>
Edit:
I will allow changes to the html if they improve the result and still maintain clean code. However for extra points I would prefer that you also solve the quiz in the current state because there are easier ways to do this when adding more html.
Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are. If you need any clarification then just shout but this should be straight forward.
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:
