SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    float problem...

    I've posted a screenshot of something I can't figure out. Please refer to it so my explanation makes sense.

    I've got the image set to float left so the text you see on the right side will go to the side of it like that. If I don't left float the image the text does normal flow and gets bumped down below the image. But floating the image like that causes the problem you see at the bottom. It does not stretch its parent container out vertically. I want the grey container box to extend out to be behind the image all the way down. It will only do this if I have text content that extends that far down, which will be variable on my site. I want to guarantee the background box will cover the image when there isn't enough text to push the box down that far.

    How can I do it?
    Attached Images Attached Images
    $slider = 'n00b';

  2. #2
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    float problem

    Try <div style="clear:both"></div> after the text. Floated elements don't take up any "space" and other elements don't know where to position themselves around it. That code should fix that problem.

  3. #3
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works pretty good, except it does some funky stuff in IE6/Win. It makes text above it disappear. Glitchy.

    [edit: changing it to a <p style="clear: both;"></p> got rid of the IE6/Win glitch. Thanks.]
    Last edited by slider; Nov 7, 2002 at 22:01.
    $slider = 'n00b';

  4. #4
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ugh, the IE problem came back and now I can't figure out how to make it go away. The only way IE6/Win won't blank out the three <p> areas above the weird <p style="clear: both;"></p> is if there's a bunch of text in them that bumps the area down a lot. See attached screen shot. The Occupation, Interests, and Notes areas should have (do if you look at the source) text there. Mozilla properly displays the text. I've tried playing with the z-index but it doesn't affect anything.

    Anybody have ideas?
    Attached Images Attached Images
    $slider = 'n00b';

  5. #5
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by slider
    Ugh, the IE problem came back and now I can't figure out how to make it go away. The only way IE6/Win won't blank out the three <p> areas above the weird <p style="clear: both;"></p> is if there's a bunch of text in them that bumps the area down a lot. See attached screen shot. The Occupation, Interests, and Notes areas should have (do if you look at the source) text there. Mozilla properly displays the text. I've tried playing with the z-index but it doesn't affect anything.

    Anybody have ideas?

    Throwing this thread back up since i have the same problem.
    i have some text and beside i want 4 columns. since i'm using no tables for layout, i used 4 floating divs for these column, and they make the text above disappear.
    Any help much appreciated.

    Quentin

  6. #6
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ARGH. I want to SHOOT the person who decided it would be a good idea to take floats and absolute positioned items OUT of the normal flow entirely. There should *at least* be the option of allowing them to affect the size of containing blocks.


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
  •