SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 46
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(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.

    image-centre.png

    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:
    Last edited by Paul O'B; Oct 30, 2012 at 02:35. Reason: link broken

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Paul, looks like fun. Could you post that image online somewhere so we could link to it?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Paul, looks like fun. Could you post that image online somewhere so we could link to it?
    Sure the image is here(

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Sorry Paul, I meant just the tv-img2.jpg (beach) image.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Sorry Paul, I meant just the tv-img2.jpg (beach) image.
    Whoops - I'm a twit

    Here it is
    .

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Whoops - I'm a twit
    Yep ... I mean, thanks!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As pointed out to me quite rightly by PM the columns in my demo are not really centred and the image isn't perfectly centred either so feel free to improve on this. I'm not worried by a few pixels in a fluid layout and of course you are free to change or abandon the css I gave you. Just make sure the html remains untouched unless you have a very clever idea that needs to adjust the html slightly and then of course we'd be delighted to see it.

  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Oh were tackling float center again (somewhat), lets see if Eric J joins us again.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    Oh were tackling float center again (somewhat), lets see if Eric J joins us again.
    Erik J seems to have disappeared off the face of the earth. I have tried to contact him many times but get no reply. I hope that he is ok. He was a genius with CSS trickery.

  10. #10
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Erik J seems to have disappeared off the face of the earth. I have tried to contact him many times but get no reply. I hope that he is ok. He was a genius with CSS trickery.
    That is worrying, although common on the Internet, hope he is ok.

    re:quiz
    Why are all your coffee break quizzes so hard for me to figure out? Is it because I don't drink coffee?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post

    re:quiz
    Why are all your coffee break quizzes so hard for me to figure out? Is it because I don't drink coffee?
    lol - could be I'm sure it will click in a minute.

    Remember only IE8+ support is needed so don't worry about IE7.

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul ,

    PM'd my solution to you.
    Working in IE8 & FF, Opera, & Webkit (Comodo Dragon).

    I'll have to get on my laptop later to test IE9, coffee break ended already.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Ray, nice to see you around again

    Well done, you have done exactly as I wanted and the layout is working fine in IE8+. You correctly spotted the set of techniques needed to accomplish this.

    I also have an entry form Markbrown4 which is pretty close but just needs one final push to get it all working (and that's a clue).

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I now have a correct solution form Markbrown4 that fulfils all the criteria. Well done Mark.

    Any more takers? It's not that hard - really

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not hard !! really ? I've now spent half a day on it, pulled out my css book but still can't get the left column text to wrap around the image. Any hints ?

  16. #16
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,401
    Mentioned
    147 Post(s)
    Tagged
    4 Thread(s)
    I got it for a part, I just can't get the text above the image to reach the end/beginning of the columns, it folds at the borders of the image. Ah well, I don't have more time to spend on it right now.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    OK time for a hint .

    It's before or after that the sandbag becomes useful and not only for the first child to play with.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Attempt submitted.

    Didn't think I had a hope at this, but surprised myself ... even if it's not the best way.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Well done Ralph, that will do nicely

    Any other takers?

    I will let the quiz run for the weekend to give others more time.

  20. #20
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by _Nikhil View Post
    not hard !! really ? I've now spent half a day on it, pulled out my css book but still can't get the left column text to wrap around the image. Any hints ?
    That's the problem with me and this site! I get too addicted to helping others and learning at the same time, too much time talking and not enough doing. But then I joined a dating site, but the only thing I learnt there was how to deal with rejection. Back here to pick up a few more tips and help out a few folks. At least I get replies here, even if they are only of a geeky nature......lol
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  21. #21
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I having another go at it, the technique I tried at first did not change, except that now I knew it was not a dead-end like I thought at first, I just hope it's easier than finding the answer to Life, the universe, and everything

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I have a correct solution from Yurikolovsky -so well done Timo

    Anyone else struggling? I'll drop a few more clues if anyone else wants to try otherwise we'll wrap this up in a few day.

    Thanks to all those that took part so far.

  23. #23
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Took a couple of goes at it but haven't quite figured out the vertical bit
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I'm sure you'll get it soon Chris

  25. #25
    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)
    I submitted something, something...
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •