csswordpressunderscores-wp

image floating in Underscores doesn't work


I'm using Underscores to build a Wordpress theme. In the structure I have a div with 275px of width . Inside this div I have another div with <img> and <h3> inside it. When I try to float the image so the h3 wraps around it the floating doesn't work with the theme but it's working in a separate html file. What's wrong with this code?

    .container{
            width: 275px;
        }
        .post-image-small {
            float: left;
        }
        .post-image-small img {
            display: block;
         box-shadow: 0px 0px 1px 1px #777;
         box-sizing: border-box;
         border: 1px solid #fff;
         float: left;
       }
        .post-image-small h3.post-title-small {
         font-size: .85em;
         margin: 0 !important;
       }
        .post-image-small h3.post-title-small a {
         color: #444;
         text-decoration: none;
       }
        .post-image-small h3.post-title-small a:hover {
         color: orange;
       }
    <div class="container">
        <div class="post-image-small">
            <img src="http://localhost/viewport/wp-content/uploads/2014/09/iwatsh-150x150.jpg" width="50" height="50">
            <h3 class="post-title-small"><a href="http://localhost/viewport/?p=1490">Integer non nibh et nibh lacinia tempus</a></h3>
        </div>
    </div>

Thank you in advance


Solution

  • In lines 158 to 163 of style.css in _s you have this:

    h1, h2, h3, h4, h5, h6 {
        clear: both;}
    

    So you need to add this AFTER all the default _S style definistions:

    .container h3{clear:right}