The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Inherited width of img within a p tag

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #45172

    Hi, I’m not sure to understand something.

    I have a page with img tags within p tags and I can’t modify HTML, just write CSS.

    long long text

    I would like the paragraphs to be 70% wide AND the img within the p tags to be 100% wide.

    But I don’t know how to do that without modifying the HTML…

    Thanks :)


    >But I don’t know how to do that without modifying the HTML

    Is there a reason why you can’t change the html?

    A paragraph is a block of text it shouldn’t (IMO) have an image in the middle of it.

    An image **between** paragraphs by all means but there is no reason why it should be inside one.


    However, if you must:


    > A paragraph is a block of text it shouldn’t (IMO) have an image in the middle of it.

    I definitely don’t agree with this. Images are inline by default and are meant to be within a block level element. Did you know the body element is not supposed to have an inline element as a direct child? Not many do, but it’s right there in the spec. The float property came about because of images in paragraphs.


    @wolfcry911 I get what you are saying but a paragraph is a paragraph and an image is an image.

    I’m not talking about block level context or anything like that.

    An image should be separate from a block of text (not a ‘paragraph’ that’s just what we use) not **part** of one.

    Would you put an image like this **inside** a single line of text? It’s still a paragraph, just a small one?

    In this case specifically, the image isn’t part of the text’s the end of one. We’re just solving a problem created by poor HTML structure in the first place.


    I’m not saying it **can’t** be done at all, it clearly can.

    Stop thinking in terms of HTML & CSS…think first in terms of text and images.

    If you have a block of text you don’t see an image (like this) in the middle of it.

    The image is always separate from the text…indeed we put margins/padding around the image to separate it from the text.

    Now, when we move to HTML we separate the text and images with floats etc. (again using margins &/or padding).

    In this case, the image is inside a paragraph for no good reason so that’s the problem we are trying to solve.

    > an image needs to be wrapped in a block level

    Yes, but do we really think this paragraph is just sitting there in the body? No, I’ll lay dollars to donuts that it’s in a div/article or whatever that **is** a block element. So, again, the image could be moved outside the paragraph.

    As I said, we’re solving a problem created by poor HMTL structure. I’m not saying we can’t do it…just that we’re papering over the cracks.


    On another point, there are occasions where images are put inside text but they’re usually very small and are more for styling purposes than anything else.


    @gcyrillus Wow that’s exactly what I meant. Thank you. :)

    I don’t have access to the templates generating the HTML on this project.

    Thank you guys !

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.