Creating a "wrapper" around the entire page. Sidebar keeps moving. (24 posts)

  1. theaor
    Posted 5 years ago #

    I've been trying to figure out how to create a "wrapper" or table around the entire wordpress page so that the sidebar stays intact. Right now if I adjust my browser's window size, the sidebar jumps to the bottom. How do I go about fixing this?


  2. Dup: http://wordpress.org/support/topic/353307?replies=2

    Post your site URL so people can look at the source code.

  3. theaor
    Posted 5 years ago #

    Sorry about that, didn't see the previous reply. The site that I'm working with is: sisterhoodnetwork.org

    I'm about to install firebug to inspect it to try to find something.

    Thanks for your reply.

  4. You have some missing closing tags and some extra </div> tags which throw the display and sidebar off; [Invalid]Markup Validation of sisterhoodnetwork.org - W3C Markup Validator. Scroll down in the valdiation report to see line numbers and source code. You shouldn't need an extra wrapper after you fix the errors.

  5. theaor
    Posted 5 years ago #

    I will look into this.. thank you so much for your help!

  6. theaor
    Posted 5 years ago #

    I ran through the errors and removed the exta </div>'s but I still have the same problem.. Would posting the entire code to the style sheet help?

  7. It's not the style sheet yet; there are still missing tags and extra tags. Have to fix those first, then figure out what else is wrong.

  8. theaor
    Posted 5 years ago #

    Okay I'll go through each one step by step. Thank you.

  9. Still one more leftover </div> above <!-- End main-content -->

  10. theaor
    Posted 5 years ago #

    I just removed that </div>.. Still the same problem. Thank you very much for your help. I'm stumped here. lol

  11. Carefully look through your dropdown menu code; you still have messed up ul and li tags.....

  12. theaor
    Posted 5 years ago #

    Okay I will look into it. Do you do any freelance coding?

  13. I do freelance work, but I went ahead and figured this out. Check this in as many different browsers as you can.

    In header.php (I think, depending on your theme adn where you added the menu code), in between <ul class="pages"> and <ul id="dropmenu"> is an extra <li> </li>, so take that out but leave the <li>.

    Then, right above </div><!-- End navigation -->, add a </ul>, so it looks like

    </ul> </li> </ul></div><!-- End navigation -->

    instead of

    </ul> </li></div><!-- End navigation -->

    And in style.css, near line 480, change

    .col-555 { width:580px; }


    .col-555 { width:525px; }

  14. theaor
    Posted 5 years ago #

    Thank you so much for your help. I made the stated changes you mentioned, but I'm still having the same issues. Still looking over it now. Do you notice anything else that might cause the sidebar to move?

    Thank you so much.

  15. Works fine for me in Safari and Firefox. Clear your cache and history. If not, delete the
    <ul id="dock"></ul> in between <!-- End navigation --> and <!-- End container -->

  16. theaor
    Posted 5 years ago #

    Thanks again for your help. I made the changes, and still have the same issue. Here's a link to a screencast of what I'm talking about:
    (this happens in every browser I've tried it in.)

    any ideas?

  17. Michael
    Forum Moderator
    Posted 5 years ago #

    if you want to give it another go:
    save a backup copy of what you have now.

    and start editing:
    you have a suspiscious unmatched (i.e. without acorresponding opening div)
    </div><!-- End post-meta -->
    in the html of your front page. take that away.
    add a new closing div after </div><!-- End col-580 (Left Column) -->

    and try to change the class col-555 to class-340 at the beginning of the sidebar: <div class="col-340 right">

    give a fixed width to #main-content in style.css - 900px seems ok.
    and 'margin: 0 auto;' to center this section.
    see here:

    #main-content {
    	padding:20px 0;
    	background:url(images/main-content.gif) no-repeat top center;
    	border-top:1px solid #c6dee7;
    	border-bottom:10px solid #d0dce2;
    margin:0 auto;

    i am not sure if this is all, and i could only try it with the front page in firefox. worth a try ;-).

  18. theaor
    Posted 5 years ago #

    Thank you both! alchymyth, I did what you told me to and it looks like it worked to an extent. I'm going to keep fiddling with the code, but right now it stays at the bottom regardless of screensize. Is there anyway to keep it on the right?


  19. Michael
    Forum Moderator
    Posted 5 years ago #

    ok, i couldn't find all the changes in your online site, and i appreciate that it is difficult to follow the ideas of someone else, and frustrating not te see results.

    however, you only have a limited number of files in your theme. let's go through them one after the other:

    if you want to stay with it, could you copy index.php into a pastebin , and also sidebar.php?

    changing the beginning of sidebar (or the last line before get_sidebar)
    to <div class="col-340 right"> seems crucial to me to get the design working.

  20. theaor: my bad; I can't believe I didn't see the "liquid layout" problem after all this. alchymyth is good with this stuff; see what he says....

  21. theaor
    Posted 5 years ago #

    I appreciate the help from both of you. This is the reason why projects like WordPress stay alive. alchymyth i created a pastebin:

    Thanks again for all of this.

  22. Michael
    Forum Moderator
    Posted 5 years ago #

    unfortunately, the link is empty :-(

  23. theaor
    Posted 5 years ago #

    Heres one for the sidebar: Sidebar

    Here's one for the index.php: index.php


  24. Michael
    Forum Moderator
    Posted 5 years ago #

    the biggest problem:
    <div class="wrapper"> should have been added in header.php just after <body> ; end the closed in footer.php just before </body>.
    it has been added to index.php, but not as far as i can see to any of the 'problem' pages where the sidear is below the content.
    this inconsistency makes it practically impossible (at least for me) to help with a solution, with the limited possibilities in this forum.

    i suggest that you try to find someone (local) to help you with this.

    sorry, that i raised the hope that i could help you :-(

Topic Closed

This topic has been closed to new replies.

About this Topic