Back Home

Open Designs

Community. Driven.

General Talk: CSS Problem - Floats and Clears

Bottom of Page

1 to 13 of 13

  1.  
    •  
      CommentAuthorbradm81
    • CommentTimeMay 30th 2008 edited by bradm81 on the 30th May 2008 at 14:13:43 EDT
     
    Maybe I'm having one of my patented stupid days, but I need some help with a CSS problem. The issue, I believe is that I have two right floated elements, and I want to clear one of them but not the other. I made a little diagram to show what I mean:

    Basically I want P2 to clear the image so that it goes all the way across DIV 1 (even if P1 is very short). I inserted a basic invisible clearing div between P1 and P2, but it is also clearing DIV 2, which is inserting a large white space between the IMG and P2.

    I set up a stripped down version of the code here and CSS here.

    It seems like this would be a normal thing people would want to do, and there's probably an easy way to fix it, brain just dont work today.

    Thanks.
    • CommentAuthorfernbap
    • CommentTimeMay 30th 2008
     
    i think adding clear: left; to P2 will be enough
  3.  
    It's your margins on elements, e.g. add in

    * {
        margin:0;
        padding:0;
    }
    And it *should* go to how you want it. You might no want to keep that code in though, so you'll have to reset each element individually.
    •  
      CommentAuthorbradm81
    • CommentTimeMay 30th 2008 edited by bradm81 on the 30th May 2008 at 14:23:24 EDT
     
    Thanks fern, but that didn't seem to work.

    @Christopher - I have that in my original code, and tried it out in the sandbox and it didn't work either.
  5.  
    Ah you didn't when I viewed the page, and adding it in (using Firefox/IE Dev Toolbars) fixed it. Will have a look what you've got up now.
    •  
      CommentAuthorbradm81
    • CommentTimeMay 30th 2008
     
    Yeah it probably made it look right just cuz the sidebar was the same height as the image. I added some length to the sidebar to make it clear.
    • CommentAuthorfernbap
    • CommentTimeMay 30th 2008 edited by fernbap on the 30th May 2008 at 14:39:22 EDT
     
    p.info {
    clear: right;
    border-top: 1px solid #CCC; border-bottom: 1px solid #CCC;
    background: #F3F3F3;
    font-size: 0.9em;
    padding: 10px 5px 10px 25px;
    }

    and remove the "clearer" class from the html
    •  
      CommentAuthorbradm81
    • CommentTimeMay 30th 2008
     
    Good idea but that didn't work either. The other side to that solution (if it did work) is that I want the clearing to work whether the image is floated right or left.
    • CommentAuthorfernbap
    • CommentTimeMay 30th 2008
     
    Sorry, that was wrong

    Just
    p.info {
    float: right;
    width: 100%;
    ....


    will be enough
    •  
      CommentAuthorbradm81
    • CommentTimeMay 30th 2008 edited by bradm81 on the 30th May 2008 at 15:14:40 EDT
     
    Beautiful. That did it, although I think I'm going to apply that method to the clearing element so I can use it in other places. Thanks fern.

    Actually, after some testing, that doesn't quite work. If there's too much white space under P1, the following element will jump up above P2. I updated the sandbox to show it, make sure you stretch your screen as wide as you can to see the problem.

    Edit 2: I summoned my old table-based html days to find a hack that seems to work pretty consistently. I just inserted an image that was 1x100% everywhere I wanted a clear. Works fine as far as I can see.
    • CommentAuthorbluecafe
    • CommentTimeMay 30th 2008
     
    Not sure if I read your code right but if you put p1 and img float:right to appear in one row and p2 below you just need to put p1 and the image in a div with the css overflow:hidden. Then p2 would align below nicely without any spaces.
    • CommentAuthorfernbap
    • CommentTimeMay 30th 2008
     
    If there's too much white space under P1, the following element will jump up above P2.


    probably adding display: block; to DIV1 would repair the float problem
    • CommentAuthorVertex
    • CommentTimeJun 5th 2008
     
    How about placing img inside p1 and going,
    p1{overflow:auto;}
    To make p1 swallow the entire length of img. That sounds noti shamed Anyways, then no clearing would be needed by p2 so it'd not clear any sidebars regardless of which side they are on.

    On a personal note though, I'd prefer the image to float to the right of several paragraphs. I did it that way here. You might have to make the font small... or the text will be longer than the image...

1 to 13 of 13

  1.