...

View Full Version : Something wrong with float:left???



mobotech
01-01-2010, 04:20 AM
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:
http://imagefrog.net/out.php/i55824_floaterror.jpg

Excavator
01-01-2010, 04:29 AM
Hello mobotech,
That is odd. I've never seen floats doubling up like that...
Try clearing the floats like this -

#content p
{
border:5px double #1b1464;
padding:1em;
background-color:#ebebeb;
overflow: auto;
}


Read about clearing floats with overflow:auto; here (http://www.quirksmode.org/css/clearing.html).


/edit:
By the way, good job on the valid code! :thumbsup:

oesxyl
01-01-2010, 04:42 AM
Hello mobotech,
That is odd. I've never seen floats doubling up like that...
Try clearing the floats like this -

#content p
{
border:5px double #1b1464;
padding:1em;
background-color:#ebebeb;
overflow: auto;
}


Read about clearing floats with overflow:auto; here (http://www.quirksmode.org/css/clearing.html).


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

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

best regards

mobotech
01-01-2010, 03:04 PM
Hello mobotech,
That is odd. I've never seen floats doubling up like that...
Try clearing the floats like this -

#content p
{
border:5px double #1b1464;
padding:1em;
background-color:#ebebeb;
overflow: auto;
}


Read about clearing floats with overflow:auto; here (http://www.quirksmode.org/css/clearing.html).


/edit:
By the way, good job on the valid code! :thumbsup:

Whoa, you rock! I've just read that whole page, but still not sure how that affected my page, can you elaborate?

Excavator
01-01-2010, 04:19 PM
This works too -


#content p
{
border:5px double #1b1464;
padding:1em;
background-color:#f00;
display:inline-block;
}

Excavator
01-01-2010, 04:24 PM
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. :confused:

/edit:
...that shows that #leftfloat has something to do with this - the floated avatar.jpg is dropping just below #leftfloat.
The box model (http://www.w3.org/TR/CSS2/box.html)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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum