CSS Float attribute not rendering properly

Hey Michelle,

Thanks for the reply.

I’m using the important tag because I want to make sure they override any styles that were in my template previously.

I’ve tried both methods. I’ve added the “display: block” to the .newsblock .photo class and I also tried replacing all the styles with the one in your post but nothing seems to move the image. Also, here is the page I’m trying to edit http://n3-art-lab.com/?page_id=283. Any ideas?

PS: I had to add one line to the code you gave me which was adding a float: left !important; to the .newsblock class. I did this because top border seems to repeat without that line of code. Here is a pic of the repeating border http://n3-art-lab.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-16-at-11.37.28-AM.png. Also, here is the change I’m referencing in context:

.newsblock {
	float: left !important;
	border-top: 1px solid #CCCCCC !important;
	margin-bottom: 15px !important;
	width: 605px !important;
}

Thank Thank Thank you very much for taking the time to check this out.

Mike

Hey webbrewers

Thanks for your reply.

Currently, I’m using Michelle’s code which does not wrap the image in the p tag (See below). Also, I’m sorry but I’m not sure I completely understand what you are saying. The .newsblock container is 605px which would fit the .newsblock p (390px) and and .newsblock img (210px). I’m still not sure why the image will not float to the right. Also, I removed the <span class=”photo”> tag from the text. Please see the second code box for an updated view.

#main {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 620px !important;
}

.newsblock {
	float: left !important;
	border-top: 1px solid #CCCCCC !important;
	margin-bottom: 15px !important;
	width: 605px !important;
}

.newsblock img {
	float: right !important;
	border: 1px solid #CCCCCC !important;
	width: 210px !important;
}

.newsblock p {
	float: left !important;
	width: 390px !important;
	margin-bottom: 1.6em !important;
}

<code>

<div id="main">
<div class="newsblock">

<img src="http://n3-art-lab.com/wp-content/uploads/2014/02/resized-test-200x280.jpg" alt="resized test" width="200" height="280" />

<p>
 <strong>
This is a test of the text. I'm not sure why this is not working. Its been almost 8 hours now.
 </strong>
</p>

<p>
This is also more test text which will be a little long then the previous text to test the CSS formatting.
</p>

</div>

<div class="newsblock">
<p>
tsi is afa fsaf asd fs asdf a fsdf afasd fas fa sdfs df sdf asf
</p>
</div>

</div>

</code>

Thanks for your help

Hey everyone,

So I figured it out. Apparently, WordPress will wrap any images you insert into a post in a paragraph tag. The way to address this is to first create a child theme so you can safely modify your theme http://codex.wordpress.org/Child_Themes and edit the functions.php to add the following code:

function filter_ptags_on_images($content){
   return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}

add_filter('the_content', 'filter_ptags_on_images');

The code was found on this site http://css-tricks.com/snippets/wordpress/remove-paragraph-tags-from-around-images/#comment-1160678

And a big thanks to Michelle and webbrewers for answering this question.

Hey webbrewers

Thanks for your reply.

I have been thinking about it but I’m still not following. When I changed the CSS and substituted Michelle’s code in (see below), the problem persisted even though the p element was removed from #main.

Also, why would .newsblock img have a p element associated with it? Would it automatically inherit it from the #main p (in my original CSS post)?

#main {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 620px !important;
}

.newsblock {
	float: left !important;
	border-top: 1px solid #CCCCCC !important;
	margin-bottom: 15px !important;
	width: 605px !important;
}

.newsblock img {
	float: right !important;
	border: 1px solid #CCCCCC !important;
	width: 210px !important;
}

.newsblock p {
	float: left !important;
	width: 390px !important;
	margin-bottom: 1.6em !important;
}

Thanks
Mike