SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    0 Post(s)
    0 Thread(s)

    CSS divs for layout have me stumped

    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)...

    HTML Code:
    	<div class="post" id="post-50">
    		<div class="title-container">
    			<div class="title-content">
    				<h2><a href="" 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="" title="View all posts in Cheats" rel="category tag">Cheats</a>, <a href="" title="View all posts in Videos" rel="category tag">Videos</a>					</span> 
    					<span class="comment">
    						<a href="" title="Comment on Duke Nukem Forever Demo Cheats">Leave a comment</a>					</span>
    					<br /><span class="negative-rating">Rating: -3</span>				</p>
    			<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="">[...Read More...]</a></p>

    HTML Code:
    .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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    180 Post(s)
    6 Thread(s)

    It just looks like you need to clear the floats.

    .excerpt {
        position: relative;
    It's hard to tell with the limited styling provided though as to what the rest should look like

    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).


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts