SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 46 of 46
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks Maleika that's working as well well done.

    We have some clever people here

    Any more takers?

    I'll probably wind this up tomorrow or Thursday so shout if you still want to try.

  2. #27
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Sent mine also.

    Though I have to admit to a little cheat. Me and the wife were gone on a car trip past week, celebrating our 10 years together, and, lucky me, we just happen to bump into a live float: center.
    http://i1054.photobucket.com/albums/...oat-center.jpg

    ... speaking of which, use the picture here and the second code I PMed you, Paul, to see how I used this quiz to make something interesting.

    Thank you Paul, for these great ideas!

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for your entry itmitică it's perfect. Well done and thanks for taking part.

    Also congratulations to you and your wife for your recent celebration.

    Loved the picture.

  4. #29
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Thank you! You're very kind. I was just following your breadcrumbs.

    I hear congratulations are in order (soon) for you too, so all the best wishes to you (and to your wife)!

  5. #30
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Great picture itmitică, looks as good as the professional stock photos... and congratulations!

  6. #31
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Mitica, I don't know what you are celebrating, but whatever it is, congratulations!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #32
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Mitica, I don't know what you are celebrating, but whatever it is, congratulations!
    He mentioned "celebrating our 10 years together".
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #33
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    @YuriKolovsky
    Thank you!
    And the photo seem so right, in more than one way, for this quiz.

    @kohoutek
    Ralph is right, me and my wife were celebrating our 10th anniversary. Thank you for your good wishes.

    But you should prepare yourself, Paul has "bigger" things to celebrate, next month and next year.

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have another late entry from Candygirl which works in all but Safari so well done. The safari problem (bug) is also evident in Maleika's entry and is strange because Chrome is fine. The rest of the entries don't suffer from this bug as they use a slightly different technique.

    I'll be awarding the Gold, Silver and Bronze medals tomorrow to end this Olympic quiz

  10. #35
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'll be awarding the Gold, Silver and Bronze medals tomorrow to end this Olympic quiz
    O no, I came in here hoping for a break from the Olympics.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Solution Time

    Thanks to all that took part and now its time to announce the solution and the winners.

    Solution:

    I gave out a few clues already but in plain English the way to solve this quiz was to create floated elements on the right of the first column and the left of the second column which were at least half the image's width. This ensured that the text avoided the area where the image was going to sit. Using any spare html elements or either of the pseudo classes :before or :after (or both) you could float little sandbags of generated content to hold the space open for the image. The image could then be placed into that space with a float and negative margins or more precisely with absolute positioning and thus avoiding any pixel imperfection due to the percentage gap between columns.

    Some of you struggled with how to push the image down into the text and once again this is done with generated content and sandbag floats. You just create a 1px wide float with generated content and float it to the side of the column and this will push the floated image down further while the text wraps all around.

    Some of you used a negative top margin technique to get the image into position but this failed in Safari as the text above did not wrap around the image and spoiled the effect.


    Here is the full solution to play with:

    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;
    	position:relative;
    }
    .col1, .col2 {
    	width:48%;
    	float:left;
    	margin:1%;
    	background:#eee;
    	text-align:justify;
    }
    .col2 { float:right }
    p {
    	padding:5px;
    	margin:0 0 1em;
    }
    .col1:before, .col2:before {
    	float:right;
    	width:1px;
    	height:100px;
    	content:" ";
    }
    .col2:before { float:left }
    .col1 div {
    	float:right;
    	clear:right;
    	height:154px;
    	width:95px;
    }
    .col2 p:first-child:before {
    	float:left;
    	clear:left;
    	height:154px;
    	width:90px;
    	content:" ";
    }
    .col1 div img {
    	width:165px;
    	position:absolute;
    	border:10px solid #fff;
    	left:50%;
    	margin:0 0 0 -93px;
    	top:115px;
    }
    </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>
    As you can see the html is very clean and the effect very usable. The only drawback is that you have to know the image dimensions beforehand.

    The Winners

    It was hard to pick a winner because the techniques were all very similar but I have decided to award the gold medal to markbrown4 because he was the first to spot that the absolute image would be perfectly centred rather than the negative margin that some others used.

    The silver medal goes to itmitică because he also spotted this technique but also because he also supplied an interesting application of the technique in a second entry which was worthy of mention.

    The bronze medal goes to Ralph as he was the first to spot that text-align:justify produced a nicer effect.

    Ray was by far the quickest so also worth a mention. Well done to all the above and indeed all that took part and hope you enjoyed the quiz and perhaps learned something that you could apply in your own designs.

    Here are the Solutions.

    markbrown4

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>paul &lt;3 css</title>
    <style>
    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;
    }
    img {
    	position: absolute;
    	top: 240px;
    	left: 50%;
    	margin-left: -82px;
    }
    .col1:before, .col2:before {
    	content: '';
    	float: right;
    	height: 200px;
    	width: 1px;
    }
    .col1 div, .col2 p:first-child:before {
    	clear: both;
    	content: '';
    	float: right;
    	height: 154px;
    	width: 100px;
    }
    .col2:before, .col2 p:first-child:before { float: left; }
    </style>
    </head>
    <body>
    <div class="wrap">
    		<div class="col1">
    				<div><img src="https://www.google.com.au/images/srpr/logo3w.png" 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>
    itmitică

    Code:
    <!DOCTYPE HTML>
    <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%;
            margin:1%;
            background:#eee;
        }
    
        .col1:before,
        .col2:before {
            content: "";  
            width: 10px;
            height: 100px; 
            background: blue;
        }
        
        .col2,
        .col1:before,
        .col1 div+p:before { 
            float: right; 
        }
    
        .col1,
        .col2:before,
        .col2 p:first-child:before { 
            float: left; 
        }
    
        .col1 div+p:before, 
        .col2 p:first-child:before { 
            content: ""; 
            width: 83px; 
            height: 124px; 
            background: red;
            clear: both;
        }
    
        .col1 div { 
            position: absolute;
            left: 50%; 
            margin-left: -83px; 
            top: 130px;
        }
    
        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>
    itmitică
    Intersting application of the technique

    Code:
    <!DOCTYPE HTML>
    <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:800px;
            height: 600px;
            margin:auto;
            overflow:hidden;
            border:5px solid #000;
            background:transparent url(http://i1054.photobucket.com/albums/s490/itmitica/itmitica-float-center.jpg) no-repeat center center;
            text-shadow: 1px 0 1px white;
        }
        
        .col1, 
        .col2 {
            width:48%;
            background:transparent;
        }
    
        .col1:before,
        .col2:before {
            content: "";
            height: 200px; 
        }
        
        .col2,
        .col1:before,
        .col1 div+p:before { 
            float: right; 
        }
    
        .col1,
        .col2:before,
        .col2 p:first-child:before { 
            float: left; 
        }
    
        .col1 div+p:before, 
        .col2 p:first-child:before { 
            content: ""; 
            width: 150px; 
            height: 300px; 
            clear: both;
        }
    
        .col1 div { 
            position: absolute;
            left: 50%; 
            margin-left: -150px; 
            top: 200px;
        }
    
        p {
            padding:5px;
            margin:0 0 1em;
        }
        
        .col1 p {
            text-align: right;
        }
      </style>
    </head><body>
      <div class="wrap">
        <div class="col1">
          <div>
            <img src="dummy.jpg" width="300" height="300" alt="">
          </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>
        </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>
        </div>
      </div>
    </body></html>
    ralphm

    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:47%;
    	float:left;
    	margin:1%;
    	background:#eee;
    }
    p {
    	padding:5px;
    	margin:0 0 1em;
    	text-align: justify;
    }
    
    img {
    	vertical-align: bottom; 
    	position: absolute; 
    	left: 0; 
    	top: 0; 
    	border: 8px solid #fff;
    }
    
    .col1 > div {
    	float: right; 
    	clear:right; 
    	margin: 15px -85px 15px 20px; 
    	position: relative; 
    	width: 165px; height: 128px;
    }
    
    .col1:before {
    	content:" ";
    	width: 1px;
    	overflow:hidden;
    	height: 50px;
    	float: right;
    	border-right: 1px solid #eee;
    }
    
    .col2:before {content:" ";
    	width: 1px;
    	overflow:hidden;
    	height: 50px;
    	float: left;
    	clear: left;
    	border-left: 1px solid #eee;
    }
    
    .col2 > p:first-child:before {
    	content:" ";
    	width: 90px;
    	height: 144px;
    	overflow:hidden;
    	float: left;
    	clear: left;
    	margin: 20px 20px 0 -10px;
    }
    
    </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>


    Rayzur


    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>Quiz 42 - Rayzur</title>
    <style type="text/css">
    body { background:#ccc; }
    .wrap {
    	width:70%;
    	margin:auto;
    	overflow:hidden;
    	border:5px solid #000;
    	background:#fff;
    	padding:10px;
    }
    .col1, .col2 {
    	width:49%;
    	float:left;
    	background:#eee;
    }
    p {
    	padding:5px;
    	margin:0 0 1em;
    }
    /* CSS additions for quiz*/
        .col2 { float:right; }
    .col1:before, .col2:before {
    	content:"";
    	float:right;
    	height:120px;
    }
    .col2:before { float:left; }
    .col2 p:first-child:before {
    	content:"";
    	clear:left;
    	float:left;
    	width:85px;
    	height:144px;
    	margin:10px 15px 10px -5px;/*background:lime;*/
        }
    .col1 div {
    	width:165px;
    	position:relative;
    	clear:right;
    	float:right;
    	margin:10px -98px 10px 10px;
    	left:1%;
    	border:10px solid #fff;
    	font-size:0;
    }
    </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>
    Yurikolovsky
    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>CSS Quiz 42 - YuriKolovsky</title>
    <style type="text/css">
    body { background:#ccc; }
    .wrap {
    	width:70%;
    	margin:auto;
    	overflow:hidden;
    	border:5px solid #000;
    	background:#fff;
    }
    .col1, .col2 {
    	width:47%;
    	float:left;
    	margin:1%;
    	background:#eee;
    }
    p {
    	padding:5px;
    	margin:0 0 1em;
    }
    
    /*these push*/
    .col1:before,
    .col2:before {
    	height:144px;
    	float:right;
    	content: " ";
    }
    .col2:before {
    	float:left;
    }
    /*these float*/
    .col1 img {
    	float:right;
    	clear:right;
    	position:relative;
    	right:-4%;
    	margin:10px;
    	margin-right:-85px;
    	padding:10px;
    	background:#fff;
    }
    .col2 p:first-child:before {
    	width:65px;
    	height:124px;
    	float:left;
    	content:" ";
    	display:block;
    	clear:left;
    	margin:10px;
    	margin-left:-5px;
    	padding:10px;
    }
    </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>

    Kohoutec (Not working in Safari)
    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>Quiz 42 - Rayzur</title>
    <style type="text/css">
    body { background:#ccc; }
    .wrap {
    	width:70%;
    	margin:auto;
    	overflow:hidden;
    	border:5px solid #000;
    	background:#fff;
    }
    .wrap:before {
    	content: "";
    	display: block;
    	margin-top: 200px;
    }
    .col1, .col2 {
    	width:48%;
    	float:left;
    	margin:1%;
    }
    p {
    	padding:5px;
    	margin:0 0 1em;
    }
    .col1 div { margin-top: -200px; }
    .col1 div img {
    	float: right;
    	margin-right: -87px;
    	position: relative;
    	z-index: 1;
    	width: 165px;
    	padding: 15px;
    }
    .col2 > :first-child { margin-top: -200px; }
    .col2:before, .col1:before {
    	display: block;
    	content: "";
    	width: 165px;
    	height: 124px;
    	float: left;
    	margin-left: -115px;
    	margin-right: 10px;
    	padding: 15px;
    }
    .col1:before {
    	float: right;
    	margin-right: -115px;
    }
    </style>
    </head>
    <!-- http://lab.rockatee.com/quiz.html -->
    
    <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>
    Candygirl Not working in Safari

    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;
    	padding-top:100px;      /* to let room for the negativ margin */
    }
    .col1 img+p, .col2 p:first-child { margin-top:-100px;     /* to make the text going up the image but this is not efficient on safari PC & maxhton -_- */ }
    p {
    	padding:5px;
    	margin:0 0 1em;
    }
    img {
    	border:10px solid #FFF;
    	margin:5px;
    	float:right;			/* float */
    	margin-right:-97px;		/* half image width */
    	position:relative;		/* to bring it in front of col2 */
    }
    .col2:before {				/* to make room on the right column for the picture */
    	content:'';
    	width:98px;				/* half image width */
    	height:154px;
    	float:left;
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="col1"> <img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea">
    				<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>
    If I've left anyone out please shout.

    Feel free to improve on this solutions and come up with different uses. Even if you couldn't solve it first time around you may see ways to improve or expand on the original ideas.

    Thanks to all that took part and hope to see you in the next quiz in a few weeks time
    Last edited by Paul O'B; Jul 30, 2012 at 03:44. Reason: correction

  12. #37
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Congrats, everyone!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #38
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the quiz Paul,

    It's quite hard to think of the 1px sand bag float if you've never used them before.

  14. #39
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    It's quite hard to think of the 1px sand bag float if you've never used them before.
    Yeah, that's what broke my neck. I definitely need to get back into CSS trickery more.

    It was a fantastic quiz and I'll definitely take part in the next one, whenever that is.

    Thanks for all the hard work, Paul!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  15. #40
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Yes, agreed, thank you Paul, and for another trick for me to always remember thanks to your dedication!

    And congrats to all, awarded or not. Maleika has it right!

  16. #41
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quiz & solution Paul though I didn't get mine to work.

    Trying to understand what's going on here with a simpler & slightly modified example using part of Ralph's solution. Trying to make the text flow around this bottom right image.
    Why does it not work in this case ? Is it because it is in the flow & the block gets pushed down instead of making the text go around it ?

    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></title>
    <style type="text/css">
    
    body { background:#ccc; }
    .wrap {
    	width:50%;
    	margin:auto;
    	overflow:hidden;
    	border:5px solid #000;
    	background:#fff;
    }
    .col1 {
    	width:98%;
    	float:left;
    	margin:1%;
    	background:#eee;
    }
    p {
    	padding:5px;
    	margin:0 0 1em;
    	text-align: justify;
    }
    
    .col1 div {position:relative; z-index:1;  }
    
    img 
    {
    	position:absolute;
        	vertical-align: bottom; 
    	bottom: 0; 
    	right: 0; 
    }
    
    
    .col1 > div:before
    {
    	content:" ";
    	height:135px;
    	width:175px;
    	float:left;
    }
    /*
    .col1 div img:before
    {
    	content:" ";
    	height: 150px;
    	width: 190px;
    	float: right;
    }
    */
    
    </style>
    
    </head>
    
    <body>
    <div class="wrap">
    		<div class="col1">
    				<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>
    				<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><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea" /></div>
    		</div>
    </div>
    </body>
    </html>

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi _Nikhil,

    There are a number of things wrong with your approach there.

    Firstly you have missed out the 1px wide sandbag float that acts a pusher to push the other floated block downwards. You have also floated your generated block left but placed the image right.

    Secondly you can't position the image at bottom:0 because there is no corresponding height that you can give the float pusher to match (100% height does not work here). Therefore you can only place the image with topxpx which would match the height of the pusher.

    Thirdly if you are looking for a way to float an image at the bottom of a section of text then that is impossible in all but Firefox 3.5+.

  18. #43
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi _Nikhil,

    There are a number of things wrong with your approach there.

    Firstly you have missed out the 1px wide sandbag float that acts a pusher to push the other floated block downwards. You have also floated your generated block left but placed the image right.

    Secondly you can't position the image at bottom:0 because there is no corresponding height that you can give the float pusher to match (100% height does not work here). Therefore you can only place the image with topxpx which would match the height of the pusher.

    Thirdly if you are looking for a way to float an image at the bottom of a section of text then that is impossible in all but Firefox 3.5+.
    Wasn't trying to get a solution to the main quiz in my post. I had no idea of the "1px wide sandbag float" till i saw Ralph's solution.
    Was trying to float an image at bottom right , I thought knowing how to do that would be somehow be essential in solving the main quiz but.... apparently not.

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by _Nikhil View Post
    Wasn't trying to get a solution to the main quiz in my post.
    Yes I realised that
    I had no idea of the "1px wide sandbag float" till i saw Ralph's solution.
    I mentioned it in the solution I gave in post #36.
    Some of you struggled with how to push the image down into the text and once again this is done with generated content and sandbag floats. You just create a 1px wide float with generated content and float it to the side of the column and this will push the floated image down further while the text wraps all around.
    Was trying to float an image at bottom right
    Yes , I know and that is impossible as mentioned above (unless you manually insert the image a ta certain point in the text but even then will only work for a fixed width layout)

    I thought knowing how to do that would be somehow be essential in solving the main quiz but.... apparently not.
    lol - no help at all I'm afraid

    If you look at my solution and give a background colour to the relevant elements you can see more easily how it is working.

    e.g.
    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;
    	position:relative;
    }
    .col1, .col2 {
    	width:48%;
    	float:left;
    	margin:1%;
    	background:#eee;
    	text-align:justify;
    }
    .col2 { float:right }
    p {
    	padding:5px;
    	margin:0 0 1em;
    }
    .col1:before, .col2:before {
    	float:right;
    	width:1px;
    	height:100px;
    	content:" ";
    	background:blue;
    }
    .col2:before { float:left }
    .col1 div {
    	float:right;
    	clear:right;
    	height:154px;
    	width:95px;
    	background:yellow;
    }
    .col2 p:first-child:before {
    	float:left;
    	clear:left;
    	height:154px;
    	width:90px;
    	content:" ";
    	background:red;
    }
    .col1 div img {
    	width:165px;
    	position:absolute;
    	border:10px solid #fff;
    	left:50%;
    	margin:0 0 0 -93px;
    	top:115px;
    }
    </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>

  20. #45
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the great quiz Paul, I really appreciate the amount of work you put into them.

  21. #46
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    Thanks for the great quiz Paul, I really appreciate the amount of work you put into them.

    NEW QUIZ POSTED
    (At last)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •