I'm trying to place the text that's currently below the picture next to the image but I can't seem to figure it out. I tried a bunch of things but it screwed it up. I'm pretty sure this is an easy fix but I'm a noob. :D
HTML
<li class="post" >
<article class="in-column" style="height:300px;"> <a href="http://yahoo.com"> <p class="article-title" style="font-size:20px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0"; height="200" width="300"></a>
<p class="excerpt" style="float:left;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. <a href="http://yahoo.com"><b>[READ MORE]</b></p></a>
<p class="excerpt">Born: April 4, 2012, Morristown, AZ</p>
</article>
</li>
</section>
</section>
CSS
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 11px;
margin: 0px;
padding-bottom: 5px;
}
p.article-title{
line-height: 19px;
margin: 5px 0px;
color: #151515;
font-weight:bold;
font-size:16px;
}
Use style="float:left;"
on your image , not on your text.
Also, remove the stray semicolon in your img
tag.
As shown here:
<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0"; height="200" width="300">
I think you need something like this:
<ul style="list-style:none; width:700px">
<li style="float:left; margin:5px;width:310px;">
<ul style="list-style:none">
<li>
<span style="font-size:20px; padding-bottom:10px;">Grumpy Cat</span>
</li>
<li>
<a href="http://yahoo.com" style="float:left;margin-right:5px">
</li>
<li style="float:left;width:380px;">
<ul style="list-style:none">
<li>
<span style="font-weight:700" >Born: April 4, 2012, Morristown, AZ</span>
</li>
<li>
Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. <a href="http://yahoo.com"><b>[READ MORE]</b></a>
</li>
</ul>
</li>
</ul>
see http://jsfiddle.net/NmUaX/15/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.