INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

floating paragraph tag makes inline ?

floating paragraph tag makes inline ?

(OP)
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

RE: floating paragraph tag makes inline ?

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

RE: floating paragraph tag makes inline ?

(OP)
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

RE: floating paragraph tag makes inline ?

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

RE: floating paragraph tag makes inline ?

(OP)
Thanks Phil,

Quote:

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close