Results 1 to 4 of 4

Thread: Can someone solve strange float:left issue?

  1. #1
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Can someone solve strange float:left issue?

    Hi guys, please look at this page http://htmlnewbie.x10hosting.com

    For some reason the 60th Anniversary Laker image is both floating on the second paragraph when it should each be floated left with the 1st and and parapgraph wrapping around the image.

    Can someone look at the code and tell me what the problem is and how to fix it? It seems to affected by the #nbalogo id.

    Here is what it should look like:

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Change the existing CSS of the following with this one. Check the new code introduced which is highlighted

    Code:
    #content p {
    background-color:#EBEBEB;
    border:5px double #1B1464;
    overflow:hidden;
    padding:1em;
    }
    Hope this helps

  3. The Following User Says Thank You to codeexploiter For This Useful Post:

    mobotech (01-01-2010)

  4. #3
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by codeexploiter View Post
    Change the existing CSS of the following with this one. Check the new code introduced which is highlighted

    Code:
    #content p {
    background-color:#EBEBEB;
    border:5px double #1B1464;
    overflow:hidden;
    padding:1em;
    }
    Hope this helps
    thanks, it worked. can you explain what happened?

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The overflow hidden clears the float of the image. Ordinarily, one might use the standard method of inserting an empty block level element with clear left just before the end of each p, but a block level element in a p causes a p to auto close, which would actually make matters worse. Even when this method works (which it will with other elements besides a p), it's messy in that it clogs up your markup with seemingly unnecessary elements.

    Interestingly, in IE 7 and less, which auto clear floats in many cases, it looked fine to begin with.

    See also:

    http://www.quirksmode.org/css/clearing.html
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mobotech (01-01-2010)

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
  •