floating paragraph tag makes inline ? 1

[1DMF]

Hi,

Why when I apply "float:right;" to a <p> tag it turns it into an inline-object.

Even if I apply CSS "display:block !important;" , it is ignored and is still displayed as inline?

Thanks,
1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[vacunita]

It shouldn't.

Floating makes any element a block level element, but being floated it removes the line feed at the end. So anything after it, will be immediately after it on the same line unless you clear the float.

Why are you floating it, if you don't want this behavior?



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1DMF]

Hi Vacunita,

I'm trying to clean up an abomination of a wordpress template I have been given.

They had floated some items right and then used a hardcoded <br> tag to drop them to the next line , I have been removing all the hardcoded <br> and empty <p></p> tags used for layout / design and found that the items were all on the same line, when I applied a border, they showed as inline, as the border was only around the content width not a block width.

If I applied clear:right , the text then didn't align next to the floated image!

I removed the float, and then text-aligned the <p> content right and was able to achieve the desired affect.

I was more confused why if I apply a display:block to a floated paragraph, it seems to display as though it was display:inline-block ?

I was expecting a block element to span the available width and knock the next <p> onto the line below, but it didn't.





"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[vacunita]

That's the effect of floating. If they are all floated they will all end up in the same line provided there is enough space for them in that line, otherwise they'll drop down to the next line. If this is not the intended result, then there's no reason to float them.

The usage of <br> clearly indicates whoever built the template did not know what floats do to elements. What was basically happening is the creator floats the elements, and then clears the floats with the <br> negating them completely. So there's no point in having them floated in the first place.

Based on what you mention I would just remove the floats from them all together.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1DMF]

Thanks Phil,

Based on what you mention I would just remove the floats from them all together.

That's exactly what I did! I wanted a block element with right justification, not try and float a paragraph tag and then hard code carriage returns.

Though in fact the code was worse than that , the content was wrapped in invalid non-existent tags <head_name> & <head_title> as is a lot of this junk wordpress template!

I had a funny 5 minutes and for some reason thought a floated tag with display:block was still a full block element, normally when I float elements I apply a fixed width to them, so I guess I could have made them big enough to drop each element to the next line!

The irony here is it is taking me more time to clean the mess up and get the actual template working than it took this so called professional web design company to throw the template together, which just proves, you might as well do it properly in the first place!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads