p take 100% width when image deleted

I Have a div container with paragraphs and image i want the paragraphs to be width 100% only when image deleted only here the code:

<div class="dynamicPageImageConstant">
    <img alt="" src="/Upload/Images/DynamicImages/Subsea Package.jpg">
    <p> this is the paragraph</p>
</div>

.dynamicPageImageConstant {
    float: left;
    padding: 1px;
    width: 96%;
}
.dynamicPageImageConstant p {
    width: 100%;
}

When I do that the text of the paragraph came down the image and part of it is hidden. Can I fix this with CSS or do I need jQuery?

here screen shot for the issue as more information

Answers


I'm not sure whether this is most suitable, as its a little hard to ascertain the specifics of what you're after..but you can apply a rule to p tags which only follow img tags, to override the default for when an image is not present:

.DynamicPageImageContant p{ /* default p styling, e.g. with no image present */
    width: 100%;
}

.DynamicPageImageContant img + p{ /* p styling with image present */
    width: auto;
}

.

Update: Accepted code:

HTML

<h1>With Image</h1>

<p class="DynamicPageImageContant">
    <img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTn_KAfHdyEKDpeGIJixdWvr_gvONoL3Pyp8P4VzyAXA3ILs0_r" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel pellentesque urna. Fusce euismod, est eget tristique mattis, arcu nibh gravida nisi, ac feugiat dui lorem id sem. Sed quis fringilla nisl, ac dignissim mi. In hac habitasse platea dictumst. Integer elementum nibh eget mi malesuada ornare. Vestibulum ultrices tortor eget suscipit volutpat. Pellentesque venenatis odio sit amet est adipiscing, nec sollicitudin massa luctus. Sed tempor nibh vel pellentesque dictum. Nam porttitor laoreet bibendum.</p>

<h1>Without Image</h1>

<p class="DynamicPageImageContant">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel pellentesque urna. Fusce euismod, est eget tristique mattis, arcu nibh gravida nisi, ac feugiat dui lorem id sem. Sed quis fringilla nisl, ac dignissim mi. In hac habitasse platea dictumst. Integer elementum nibh eget mi malesuada ornare. Vestibulum ultrices tortor eget suscipit volutpat. Pellentesque venenatis odio sit amet est adipiscing, nec sollicitudin massa luctus. Sed tempor nibh vel pellentesque dictum. Nam porttitor laoreet bibendum.</p>

CSS

.DynamicPageImageContant img {
    float:right;
    margin:0 5px 5px 0;
}
.DynamicPageImageContant p {
    display:inline;
}

This code will do the job:

<div class="dynamicPageImageConstant">
    <img alt="" src="/Upload/Images/DynamicImages/Subsea Package.jpg">
    <p> this is the paragraph</p>
</div>

<style>
.dynamicPageImageConstant {
   width: 100%;
padding: 1px;
}
.dynamicPageImageConstant p, .dynamicPageImageConstant img {
    display: inline-block;
width: auto;
} 
</style>

Need Your Help

Making input form rotate in 3d using WPF (like silverlight planeprojection)

wpf silverlight user-controls 3d

I am looking at updating the UI of one of my projects that currently uses Winforms and i was hoping to use WPF. I have used silverlight for a while and wanted to use the same PlaneProjection effect...

Parallelize webpack builds to improve performance?

javascript webpack

My webpack production builds take upwards of 70 seconds, but only uses one CPU core.