Support » Themes and Templates » Twentyten sidebar position (not cooperating)

  • Hello wordpress comunity,
    I have run into an issue positioning my sidebar next to my main content section.
    Ultimately, I am trying to partially overlap the sidebar with the main content.
    For right now, I am just trying to get the sidebar up and directly to the right of the content.…something is forcing it to the bottom of the page.

    Here is the mark up:

    <section id="main-content">
    		<div id="container">
    			<div id="content" role="main">
    			/* Run the loop to output the page.
    			 * If you want to overload this in a child theme then include a file
    			 * called loop-page.php and that will be used instead.
    			get_template_part( 'loop', 'page' );
    			</div><!-- #content -->
    			<?php get_sidebar(); ?>
    		</div><!-- #container -->

    and the relevant css:

    [CSS code moderated – use the pastebin or post a link to your site]

    I am working on this site locally so I am unable to link to it. So hopefully this image will do what it can for now.
    Here is what is resulting:

    any ideas as to what might be causing this? I feel it’s a css conflict. I have been playing with floats, positions, display, margins and widths of each element…and nothing seems to move it up!?

Viewing 12 replies - 1 through 12 (of 12 total)
  • The #container is 85% width and the #secondary (assuming that’s the sidebar) is 25% width — add those up! That’s why the sidebar is below the main container section.

    The container is 85% of the entire screen and is holding the content and the sidebar.
    To make sure, I changed the primary width to 10% and changed the contents right margin to 600px to provide more potential space for the sidebar.


    After decreasing the sidebar width and increasing the content right margin I end up with this: Image here

    I apologize for only giving screenshots. If I were able to upload this at the moment I would, but until then I am only able to work with what I have.

    If there are any other ideas, I could sure use a suggestion.

    Thanks in advance,

    Yeah, I was not sure about that because I could not see the coding of the page structure. The best way to figure out layout stuff and CSS is using Firebug — are you doing that? It’s pretty impossible for me (or anyone) to help much without being able to see the page live. Sorry I can’t be of more help.

    If you want to use pastebin to post the html (not the php code) and the CSS file, I might be able to make more sense of it…

    I just read your OP again — and the only way you are going to be able to overlap the sidebar is by using absolute positioning — which is somewhat tricky and challenging and you have to understand CSS quite well. And it’s entirely different than what you are doing now…i.e. doing this will not help you do that.

    Ok, to make this easier, I uploaded the site and you can see it here.
    I have been using the developer tools to play around with the css properties but I still cant’t seem to see why this is happening.

    You can see that if you were to give the sidebar ( <div id=”primary”> ) a negative right margin, the content and sidebar overlap which is what I am going for. But it sidebar is still pushed down, and I know giving the sidebar a huge negative top margin is not the correct thing to do.

    I nested the sidebar within the <div id=”container”> to allow this overlap. Before I did this, the sidebar was directly next to the content as it should but when I tried to overlap one with the other, the sidebar was always pushed down. Nesting the sidebar within the container div with the #content permits an overlap for whatever reason.

    But the problem still remains, the sidebar is at the bottom, and it is not apparent to me why this is happening.

    So if anyone has any suggestions now that the site is totally visible, I am all ears.

    Thanks in advance,



    Forum Moderator

    After reviewing the error and the source code, I am a little confused.
    It seems the error is stating a <body> tag has been opened prior to this one: <body class=”page page-id-276 page-parent page-template page-template-Main-page-with-sidebar-php logged-in”>

    But when I look at the source and rendered html in the developer menu, I only see one body tag opened, which is the one above and one </body> tag just before</html>.

    I googled the error I was getting which is: “An body start tag seen but an element of the same type was already open.” and found this unresolved thread on stack overflow.

    It wasn’t exactly much help, but the scenario is similar it seems.

    At this point, I am not really sure how to go about resolving the html validation error..

    I could still really use a little guidance.

    I would imagine this is some small css issue but I am just unsure what to try.
    I’m still pretty confused about the validation error whether its related to the sidebar or not.

    I would really appreciate any insight into the sidebar behavior as well as the validation error..

    The “serious” error is that the body tag starts part-way down the page — i.e. there is content above/outside the body tag. Don’t know how you managed that, but it IS a major problem. The body tag must start directly after the head section…as is, it is on line 185 of the html code.

    In your modifying of the php files, something got messed up…

    I would not even try to deal with the sidebar issue until you get the above fixed — as that kind of problem usually messes up other stuff as well.

    Ok, I have moved <body <?php body_class(); ?> so that it comes directly after the </head> tag, which satisfies the validation check for the <body> error.

    But fixing this revealed quite a few other errors which I have worked through.

    There are only 3 remaining validation errors, and all are due to mysterious </p>’s that don’t have a matching pair. I see them in the source, but when I view that particular page from the WP dashboard, there are no <p>’s whatsoever. It seems that the plug-in “postTabs” is inserting them dynamically. When I deactivate the plug-in, the document passes the validation check. I have left it active, because I don’t imagine these open <p> elements could be the culprit of the sidebar issue.

    So at this point, I have 3 <p> related errors (or 0 if I deactivate the plugin) and still, a very uncooperative sidebar…

    If anyone has an idea about this sidebar situation, please share what you know/notice that might be causing this.

    Thanks for the guidance thus far!
    but still not quite there yet…

    Okay, to do what you want with the sidebar — “overlapping” it, you have to use absolute positioning and adjust the margins accordingly (to put it where you want it).

    I put in some approximate values — start with these:

    #primary {
        background: none repeat scroll 0 0 padding-box #F2F2F2;
        border: 8px solid transparent;
        box-shadow: 0 0 8px #777777;
        margin: -320px 0 5px 500px;
        position: absolute;
        width: 25%;
        z-index: 10;

    getting closer..

    Using absolute positioning allows me to position as I please, BUT because it is still being pushed down below the content by default, the sidebar moves up 320px from where the content ends.

    Depending on the amount of page content will determine where the sidebar is positioned. I feel like using position:absolute will get messy needing to use per-page custom negative top magins. This just doesn’t seem efficient.

    I feel fixing it this way doesn’t address the source of the problem – the sidebar being pushed beneath the content.

    As it stands, I have left #primary absolutely positioned. But if you were to look at any of the pages contact, faq or your plan, in comparison to the about page (linked earlier in a previous post), you will notice that this method is not very consistent.

    Is there a way that this can be done using position relative?
    More importantly, I should probably be asking why is the sidebar being pushed down in the first place?!?

    I do appreciate everything that has been suggested, but the problem persists..

    It’s being pushed down because that’s the normal flow of the elements on the page UNLESS you specify otherwise — using absolute or float (right in this case).

    And yes, this is not a good use of absolute positioning it does not work well on layouts that change at all. However, without that, there is no way (that I know of anyway) to overlap the sidebar.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Twentyten sidebar position (not cooperating)’ is closed to new replies.