CSS divs for layout have me stumped

HTML & CSS
1

So I figure after all these years, it’s finally time to get with the present and stop using tables for page layouts.

So I’m using divs on a wordpress theme I’m working on, but I’m having some trouble.

In this case, in each “post block” on the main page I simply want the title, author, etc in a top left-aligned block, with an image (a rating system I made) aligned to the right next to it, and finally the post excerpt underneath.

Simply put, want it to look like this…

However, my actual code comes out like this (the rating:0 part is the block with the right aligned image)…

Here is my code (it’s php, but here is what the page processes it as)…

	<div class="post" id="post-50">
		<div class="title-container">

			<div class="title-content">
				<h2><a href="http://www.dukenukemforevercheats.net/duke-nukem-forever-demo-cheats/" rel="bookmark" title="Permanent Link to Duke Nukem Forever Demo Cheats">Duke Nukem Forever Demo Cheats</a></h2>
			
				<p class="postinfo">
					<span class="upper">
							Jun 10, 2011</span> <span class="category"><a href="http://www.dukenukemforevercheats.net/category/cheats/" title="View all posts in Cheats" rel="category tag">Cheats</a>, <a href="http://www.dukenukemforevercheats.net/category/videos/" title="View all posts in Videos" rel="category tag">Videos</a>					</span> 
					<span class="comment">

						<a href="http://www.dukenukemforevercheats.net/duke-nukem-forever-demo-cheats/#respond" title="Comment on Duke Nukem Forever Demo Cheats">Leave a comment</a>					</span>
					<br /><span class="negative-rating">Rating: -3</span>				</p>
			</div>	
			
			<div class="rating-zero"><span class="negative-rating">Rating: -3</span></div>		</div>
		
		
		<div class="excerpt">
			<p>The Duke Nukem early access demo is out, and what better time to start playing around with cheats?</p>

<p>We’ve got several for you here, including a cheat to get extra weapons, one to levitate, and a secret room that leads to Duke’s house.  Here we go…</p>
<p>Extra Weapons – Type DNWEAPONS</p>
<p>Levitate – Type DNCLIP</p>
<p> <a class="read-more" href="http://www.dukenukemforevercheats.net/duke-nukem-forever-demo-cheats/">[...Read More...]</a></p>
		</div>

	
	</div>

.title-container {

}

.title-content {
	float: left;
}

.rating-positive {
	float: right;
}

.rating-negative {
	float: right;
}

.rating-zero {
	float: right;
}

.excerpt {
	position: relative;
}

I’ve tried playing around with width, min-width, max-width, etc but still no luck.

2

HI,

It just looks like you need to clear the floats.


.excerpt {
    position: relative;
  [B]  clear:both
[/B]}

It’s hard to tell with the limited styling provided though as to what the rest should look like :slight_smile:

Remember that floats need to come first before the content that you want to wrap so you can’t put float:right at the end of a line and expect it to be level with the text before it. The float must come first (as far as IE7 and under is concerned).