Sidebar pushed to bottom/first post on page

  • I am trying to create my own theme from scratch for the first time ever and I’m nearly complete with it, although I still need to add some more styles, but I’m having a problem with the sidebar. I have a feeling I’ve placed something wrong somewhere, but after spending hours on it, I cannot figure out exactly where I have made the mistake, so hopefully someone here can assist me with it. When you go to my site, you will start at the HOME page where it’s been set to show my latest posts. The sidebar is lined up with the oldest post. If there was only 1, it would look fine like when you go to the About or Contact Pages. The way it’s lined up on a Page is how it should be lined up on the Home/Blog pages at all times, but I’m not sure where I have messed up.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi,

    I have looked into your stylesheet and I see one problem.

    If you wish to move your side “NAV” bar at the top (instead of bottom), open your style.css

    themes/Theme/style.css

    Look for this:

    .sidebar {
    float: right;
    padding-right: 30px;
}

    and remove (comment out) this:

    float: right;

    Save changes and try viewing your site again (it should resolve your problem).

    Thread Starter imdjluis

    (@imdjluis)

    Thanks, I did that, but now it appears to be too wide. I know if this was still just a static page, this would mean it’s not inside the proper div that’s set to give the combo of the sidebar and main content a width of 1000px. I’ve tried everything I can think of, but I can’t see where else I’m messing up. This is what it should look like.

    Looking at your HTML mark-up, it seems like you have defined sidebar DIV below the <footer> tag. Try moving the sidebar DIV above.

    Ok, instead of trying (above).

    Let’s try fixing the layout by taking one thing at a time.

    In your style, update the width like this:

    ul, n.sidebar-title {
    list-style-type: none;
    width: 810px;
    text-align: right;
}

    After that, we just need to wrap your sidebar and bring it to right.

    Ok I fixed it.

    Disregard the above solution(s)/code.

    Simply add this in your style.css (at the bottom):

    .sidebar-box {
    margin-left: 25%;
}

    (You can set the “%” as per your requirements)

    Thread Starter imdjluis

    (@imdjluis)

    Alright, I think I got it all straightened out. Thanks a lot, this is my first attempt to make a theme from scratch and I feel pretty comfortable trying another one at another time. Thanks for your help!

    You’re welcome ?? I am glad the issue has been resolved and now you feel comfortable in updating the style / layout of the site.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Sidebar pushed to bottom/first post on page’ is closed to new replies.