WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS Float attribute not rendering properly (11 posts)

  1. mike19145
    Member
    Posted 6 months ago #

    So its been almost 8 hours and I've searched literally every forum before posting this question. I give up!!

    I was asked to recreate the "look" of a webpage http://www.conceptspace.jp/news.html <a/> my friend found and recreate it on a page on his site http://n3-art-lab.com/?page_id=283 .

    I looked at the code using firebug and did my best to recreate the CSS in the CSS Stylesheet Editor and the <div> tags in the body of the post on my wordpress page.

    Can someone please help me float the image to the right of the text?

    I would like the image and text to look like this page: http://www.conceptspace.jp/news.html <a/>

    Here is what my CSS looks like:

    #main {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	width: 620px !important;
    }
    
    .newsblock {
    	border-top: 1px solid #CCCCCC !important;
    	float: left !important;
    	margin-bottom: 15px !important;
    	width: 605px !important;
    }
    
    .newsblock .photo {
    	float: right !important;
    	overflow: hidden !important;
    	width: 210px !important;
    }
    
    .newsblock .photo img {
    	border: 1px solid #CCCCCC !important;
    }
    
    #main p {
    	float: left !important;
    	width: 390px !important;
    	margin-bottom: 1.6em !important;
    }

    Here is what the text on my page looks like with the "text" option selected:

    <code>
    
    <div id="main">
    <div class="newsblock">
    
    <span class="photo">
    <img src="http://n3-art-lab.com/wp-content/uploads/2014/02/resized-test-200x280.jpg" alt="resized test" width="200" height="280" />
    </span>
    
    <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>

  2. Michelle
    Member
    Posted 6 months ago #

    Without seeing your site it's hard to simplify - I'm not sure why you're using the !important so much? - but hopefully this will work? EITHER add "display: block" to your .newsblock .photo class like so:

    .newsblock .photo {
    display:block;
    float: right !important;
    overflow: hidden !important;
    width: 210px !important;
    }

    OR try replacing all the styles above with this:

    #main {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	width: 620px !important;
    }
    
    .newsblock {
    	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;
    }
  3. mike19145
    Member
    Posted 6 months ago #

    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

  4. webbrewers
    Member
    Posted 6 months ago #

    The difference is the non floating image is wrapped in a <p> tag which is too wide (390px) to float within the containing element. Go into the text editor and remove the p tag before the image code.

    #main p {
    	float: left !important;
    	width: 390px !important;
    	margin-bottom: 1.6em !important;
    }
  5. mike19145
    Member
    Posted 6 months ago #

    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

  6. mike19145
    Member
    Posted 6 months ago #

    Hey webbrewers,

    Yes, I finally partially understand what you are saying and when I removed the section of CSS

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

    it rendered properly but now my options to format the text (float, width and margin) will not be available.

    I tested the code on CSSdesk.com and it renders properly with all the code present but for some reason on my site it wraps the image in the <p> even if I remove it from the CSS file. Can I use some other tag then <p> to hold CSS rules for the text which i want to include and format?

    Thanks in advance.

  7. mike19145
    Member
    Posted 6 months ago #

    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.

  8. webbrewers
    Member
    Posted 6 months ago #

    I think having a p tag added is normally okay, but when you specify a width for #main p, it gets inherited by any p element within #main (unless you override it). So I think the problem here was you had two p elements (newsblock text and the image one) both 390px wide which wouldn't fit in a 605px wide container. Though the image was only 210px, its p container was set at 390px.

  9. mike19145
    Member
    Posted 6 months ago #

    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

  10. webbrewers
    Member
    Posted 6 months ago #

    It's not technically an inheritance issue - it's about where you place the element in relation to the id or class. Positioning an element type after an id or class (eg #main p) is a specific rule that will get applied to any p tag within the main element. That has a different effect from positioning an element before the id (div#main) which will only target the div with an id of main.
    In this case, wordpress was wrapping the image within a p tag, which the #main p rule was then making 390px wide.

  11. Michelle
    Member
    Posted 6 months ago #

    Sorry to be chiming in so late! @mike19145, @webbrewers has it right on the p tag. If you want further explanation of child/sibling selectors here's a great article: http://css-tricks.com/child-and-sibling-selectors/

    Glad to see you got everything working. :)

Reply

You must log in to post.

About this Topic

Tags