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
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}