SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Brocberry's Avatar
    Join Date
    Sep 2009
    Location
    England
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Clearing a float

    On some computers this looks fine, but on my home pc it looks like this - see the text flooding under the image




    Attempted Fix
    I think the problem was that I was floating the image to the left rather than floating the text to the right.

    Unfortunately this fix looks worse than the first offering - a huge gap between first and second paragraph





    Here's the markup:
    Float-fix is called 'clearfix'
    class 'thanks' is the background css class....
    Code HTML4Strict:
     
    <body id="testimonials-page">
     
    <div class="thanks clearfix">
    <p>................</p>
    <img .../>
    </div>



    And the style sheet
    Float applied to paragraphs
    Code CSS:
    div.thanks img {width:30&#37;;}
    #testimonials-page div.clearfix p {float:right;width:60%;}


    Code CSS:
    .clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}


    I hope someone can make sense of that - thanks!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Four ways to fix it. One, give the p left padding equal to the image and float the image left. Two, keep it how it is, and give the image some bottom padding or margin to keep the text from comming around it. Three, keep it how it is, and give the p overflow auto and haslayout for ie (I think rarely do that). Four, give the p a width to keep it from going under the image. Or any combination of those. Untested...

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I would suggest a simpler solution, something like this:

    [EDIT: I mean 'simpler' than the original, rather than simpler than Eric's, which I didn't see!]

    CSS

    Code:
    #wrapper {
       width: 100%; 
    }
    
    #wrapper img {
        width: 30%;
        float: left;
    }
    
    #col-right {
        float: right;
        width: 60%;
    }
    HTML

    Code:
    <body id="testimonials-page">
     
    <div id="wrapper">
    <div id="col-right">
        <p>Riusto odoloreet ute ... dolore ver sum autpat.</p>
    </div>
    
    <img src="image.jpg" />
    
    </div>
    See if that helps!


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
  •