CSS bottom spacing issue with single line post on blog

HTML & CSS
1

I am looking for help with my company blog http://blog.theglenngroup.com. I purchased this theme from Theme Forrest that works great, but I am making a lot of custom edits and ran into an issue with the CSS. I am having trouble figuring out a way to give the correct margin bottom spacing on the post title that will work on both single line posts and double line posts. If you visit the site you can clearly see that the CSS was setup to work great with a double line post, but not with a single line post. Here is my HTML for this post title section:

<li class="post-2049 post hentry category-content">
 
<div class="title">
 
<h2 id="post-2049"><a title="Permanent Link to Last year we went digital. This year we went analog." rel="bookmark" href="http://blog.theglenngroup.com/content/last-year-we-went-digital-this-year-we-went-analog/">Last year we went digital. This year we went analog.</a></h2>
</div>        
 
<div class="comments_tally"><a href="http://blog.theglenngroup.com/content/last-year-we-went-digital-this-year-we-went-analog/">No Comments</a></div>
 
<div class="entryClear"></div>
 
<div class="entry"><p>In 2009 we won a National Addy for a Web/Social campaign. This year we recently won a National Addy for a good[old-fashioned] print ad for Tahoe Stand Up Paddleboards. Yep, we still do those, too. <a class="more-link" href="http://blog.theglenngroup.com/content/last-year-we-went-digital-this-year-we-went-analog/#more-2049">Read More</a></p>

And here are my styles for this post title section:

#content .content_wrap .entries ul li, #content .content_wrap .full-entry 
{
clear:both;
margin-bottom:20px;
}
 
.title 
{
font-weight:normal !important;
width:460px;
}
 
.comments_tally 
{
background:url("library/img/blog/comments_bg.jpg") no-repeat scroll 0 0 transparent;
color:white;
float:right;
font-weight:bold;
height:30px;
line-height:22px;
margin-left:1em;
margin-top:6px;
text-align:center;
width:112px;
}
 
.entryClear
{
clear:both;
height:1em;
}
 
#content .content_wrap .entries ul li .entry, #content .content_wrap .full-entry .page
{
clear:both;
font-size:12px;
height:auto;
padding-bottom:20px;
padding-top:10px;
}

I figure that throwing in the would work since it would push down depending on how much content I have there, but of course it does not work. I’m sure this is an easy fix, but I haven’t been able to figure it out. Any feedback would be greatly appreciated.

2

Hi,

You have a number of issues there to solve. First of all you have set the h2 to height:0 just so that it doesn’t take up any room. That means that when it wraps it still doesn’t take up any room and therefore you cannot account for it.

You should float the h2 and remove the height:0 and then it will line up alongside the no comments bubble.


.title h2{
float:left;
/*height:0;*/
}

The other gap is that you have a 1 em height in your entryClear element and top margin on the p element holding the image.


.entryClear {
clear:both;
[B]height:1em;[/B]


}


.entry p {line-height:1.9em !important;
[B]margin-top:1em[/B];


}

If you address those elements then you can reduce the spacing. It looks as though you also have 10px padding top on .entry.

You should avoid empty elements as clearers as there are better ways of clearing but I’m guessing the html isn’t yours.

3

Thank you Paul. This worked great. I knew it was something stupid like that. The posts look great now.

http://blog.theglenngroup.com/