Treehouse: Grow your CSS skills. Land your dream job.

WordPress PHP Alignment

  • # January 18, 2011 at 6:21 pm

    Okay, so I am starting out coding PHP and have been using CSS Tricks “Creating a Website” 1-3 and Starkers as a template. I have already successfully coded one site, but the layout is a bit different. Basically I want to align top of the sidebar with the bottom of the header line.

    This is the current state of Swift Runway Productions in WordPress:

    This is the desired state of Swift Runway Productions in HTML/CSS:

    Please help!


    # January 18, 2011 at 6:29 pm

    Looks like your

    is ending before the rest of your sidebar.php content.

    Also try floating your sidebar div left instead of right.

    # January 18, 2011 at 6:34 pm

    Also, looking closer at your code, your

    closes before you add your sidebar.

    Try also adding

    margin: 0 auto;

    To your pagewrap div

    # January 18, 2011 at 7:41 pm

    Hey dhechler, that was really helpful actually. Thank you!

    What I’m having a hard time figuring out though is where this extra tag is so I can delete it and put it at the beginning of the footer. Where did you see it?

    # January 18, 2011 at 10:43 pm

    are you talking about your


    That was my mistake. I looked at your code wrong. It’s not that your closing tag is in the wrong spot. It’s that you didnt clear the float after closing your div. Let’s do this.
    In your css write this.

    .clear { clear: both; }

    Then after your


    in your index.php, put this in

    So it would be

    get_sidebar(); ?>

    < ?php get_footer();

    That should fix your float issues.

    Also, i noticed your content div had padding: 30px; which is causing the sidebar not to float next to the content as in your HTML document.
    You could try

    padding: 30px 0;
    # January 18, 2011 at 10:46 pm

    Also, if you wouldn’t mind just grabbing all of your index.php and posting it at and pasting that link here, I could take a look at it and help out further if you would like.

    # January 19, 2011 at 12:33 am

    That’s where the index.php was uploaded

    # January 19, 2011 at 3:59 am

    Ok, this helps. Try this

    get_header(); ?>

    < ?php
    /* Run the loop to output the posts.
    * If you want to overload this in a child theme then include a file
    * called loop-index.php and that will be used instead.
    get_template_part( 'loop', 'index' );

    < ?php get_sidebar(); ?>

    < ?php get_footer();

    This should solve some issues and get your posts inside your main content div.

    # January 19, 2011 at 4:06 am

    Also, go to your style.css and change your #page-wrap css to this just to help with centering the page and width.

    #page-wrap {
    margin: 0px auto;
    width: 940px;

    and your main-content div should be 700px width.

    # January 19, 2011 at 1:13 pm

    This is what it looks like now. I floated the whole page wrap left, so it would align the borders.

    Could it be that I need to fit the sidebar div WITHIN the main-content div and omit the sidebar outside of the container?

    # January 19, 2011 at 2:48 pm

    don’t float your page-wrap left. It screws up the margin: 0 auto; and doesn’t center your content on the page.

    Also, make your page-wrap width 941px; instead of 940. That will pull your sidebar up. Or you can go the opposite direction and make your sidebar width 239px; since your 1px border on your main-content adds 1px to the width.

    # January 21, 2011 at 3:05 am

    The sidebar still doesn’t want to go up to the top.

    It does look like the clear worked, however, because I was able to add another navigation onto the footer.

    # January 21, 2011 at 3:14 am

    Thats because you’ve added 20px padding around your sidebar div. Try replacing the padding you have there now with:

    padding: 0 20px 20px 20px;
    # January 21, 2011 at 2:28 pm

    Okay, so here’s what I think might fix it:

    How do I get rid of the PHP where it says this?

    Swift Runway Productions
    Just another WordPress site
    Skip to content

    Updated site with Lorem Ipsum post:

    # January 21, 2011 at 9:46 pm

    Heres what i found.

    You need to add margin: 0 auto; to your #page-wrap in your style.css file. Right now you have it as

    If you want to do it that way (inline styling) then you need to do this

    but it would be better to add this into your css as

    width: 1024px;
    margin: 0 auto;

    That should fix what you want.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.