Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Something wrong with float:left???

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

    For some reason the 60 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 is tell me what the problem is and how to fix it? It seems to affected by the #nbalogo id.

    Here it what is should look like:

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mobotech,
    That is odd. I've never seen floats doubling up like that...
    Try clearing the floats like this -
    Code:
    		#content p
    		{
    			border:5px double #1b1464;
    			padding:1em;
    			background-color:#ebebeb;
    overflow: auto;
    		}

    Read about clearing floats with overflow:auto; here.


    /edit:
    By the way, good job on the valid code!
    Last edited by Excavator; 01-01-2010 at 04:34 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mobotech (01-01-2010)

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Excavator View Post
    Hello mobotech,
    That is odd. I've never seen floats doubling up like that...
    Try clearing the floats like this -
    Code:
    		#content p
    		{
    			border:5px double #1b1464;
    			padding:1em;
    			background-color:#ebebeb;
    overflow: auto;
    		}

    Read about clearing floats with overflow:auto; here.


    /edit:
    By the way, good job on the valid code!
    yes, you are right but will make visible a horizontal scroll bar.

    add also a width: 581px; in the same declaration.

    best regards

  • Users who have thanked oesxyl for this post:

    mobotech (01-01-2010)

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello mobotech,
    That is odd. I've never seen floats doubling up like that...
    Try clearing the floats like this -
    Code:
    		#content p
    		{
    			border:5px double #1b1464;
    			padding:1em;
    			background-color:#ebebeb;
    overflow: auto;
    		}

    Read about clearing floats with overflow:auto; here.


    /edit:
    By the way, good job on the valid code!
    Whoa, you rock! I've just read that whole page, but still not sure how that affected my page, can you elaborate?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This works too -
    Code:
    		#content p
    		{
    			border:5px double #1b1464;
    			padding:1em;
    			background-color:#f00;
    display:inline-block;
    		}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    If you want to see something very odd though,
    remove our fix from #content p
    and copy/paste <h2>Lakers Bryant ... action heroes...</p> so there are 4 instances of header and paragraph inside #content.

    Without the fix, the first two floats are doubled like your original problem. The subsequent floats work as expected.

    /edit:
    ...that shows that #leftfloat has something to do with this - the floated avatar.jpg is dropping just below #leftfloat.
    The box model is off there. When figuring total width, margin/padding/border all count.
    On my screen your #leftfloat is 336px wide but you only have #content margined over 335px. (I say on my screen because I don't know how em padding affects total width in pixels.)

    Putting a height:200px; on #leftfloat has the expected result of moving avatar.jpg up a bit.
    Last edited by Excavator; 01-01-2010 at 04:49 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •