The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Various Design Issues

  • # March 12, 2013 at 4:25 pm

    I am having several problems. Here is my website. Okay, so I am trying to create something like this.

    First off, several things that have been ordered to float: right; are not actually floating right. The part that states the author and date, post-info right, and the stated category, category-menu, are not on the right side of the page. But category-menu looks like it might be floating right, I may just need to change the positioning. But post-info right is most certainly not doing what I want it to.

    That is the first issue. Let us figure out that first before I go any further. Thank you in advance!

    # March 12, 2013 at 4:33 pm

    Seem to be floated right to me (or positioned absolutely as it seems). You probably want to use `text-align: right;` to align text. Float moves just the element, it doesn’t touch text inside the element.


    Take `position: absolute;` away on some of the floated elements. Elements that are absolutely positioned cannot be floated.

    # March 12, 2013 at 5:46 pm

    This reply has been reported for inappropriate content.

    @Merri: Yay! I’m an idiot. Yep, text-align indeed did what I was trying to do with float. Sigh. Thank you. Also, I removed position: absolute; on .category-menu and then I gave it padding-left: 300px;, but if you know of a better way to position it, I am up for suggestions.

    Okay, problem #2. When you view a page using single.php like this one, all of the content gets thrown to the left side. The code is pretty much the same on every page, so I opened up single.php, and this is all it is:

    * The Template for displaying all single posts
    * Please see /external/starkers-utilities.php for info on Starkers_Utilities::get_template_parts()
    * @package WordPress
    * @subpackage Starkers
    * @since Starkers 4.0

    <time datetime="” pubdate>


    Everything looks fine to me, but obviously something is not working. Any help would be greatly appreciated.

    # March 12, 2013 at 6:39 pm

    Your `.single {}` class is floated left and has width of 430px.

    Line 458 in your `style.css`.

    # March 12, 2013 at 6:52 pm

    This reply has been reported for inappropriate content.

    Oh, I see. Oops. I named one of my post types “single” as well. I knew it became broken when I hauled over the new code, I just did not know where I went wrong. Thank you, @AlenAbdula. Life-saver.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed