WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] newly added sidebar showing below content (14 posts)

  1. mbartizmo
    Member
    Posted 1 year ago #

    Hello world. I'm running the Sandbox 1.6.2 theme. I've added a new sidebar on the right of my pages. The problem is that it's appearing below my content, to the right of the footer.

    I've googled around -- I don't think it's unclosed div as I've tried adding </div> in front of the <?php get_sidebar('right') ?> call in page.php.

    You can see it the problem here: http://www.englishcurrent.com/esl-materials-2/indefinite-articles-a-an-english-sounds/

    Is it a problem with the floating? Here's the code:
    /*
    LAYOUT: Three-Column
    DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content
    */
    div#container {
    width:100%;
    }

    div#content {
    float: left;
    margin:0 260px 0 180px;
    }

    div.sidebar {
    overflow:hidden;
    width:160px;
    }

    div#primary {
    float:left;
    margin:0 0 0 -100%;
    }

    * html div#primary {
    left:20px;
    position:relative;
    }

    div#secondary {
    float:left;
    margin:0 0 0 -180px;
    }

    div#third {
    width:250px;
    float:right;
    }

    div#footer {
    clear:left;
    width:100%;
    }

    Any help would be appreciated!

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

  3. mbartizmo
    Member
    Posted 1 year ago #

    wow. gross. i have a lot of clean-up to do. good validator site. thanks. let me clean it up and then mark as resolved if that fixed it.

  4. mbartizmo
    Member
    Posted 1 year ago #

    ok. i cleaned up the HTML problems identified by the validator (one unclosed table and a few unclosed divs). I didn't touch errors related to php that wasn't mine or google analytics/adsense code.

    The right sidebar is still below the content though. Any ideas?

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    You've still a substantial amount of errors. Invalid markup causes formatting issues.

  6. mbartizmo
    Member
    Posted 1 year ago #

    For troubleshooting purposes, I took out the Amazon Affiliates widget which caused about 15 errors. I switched several of the 'OnClick' calls to lowercase to be compatible with XHTML. i fixed a few more and got it down from 29 years to 7.

    The right-sidebar bar is below content on all pages, including the main one. Any ideas?

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can't just apply floats to your sidebar, like you would normally do. Your CSS and HTML layout means you have to force the sidebar in that position using an extensive use of minus margins, or position absolute values.

    To your sidebar, add the following styles;

    position: absolute;
    top: 120px;
    right: 0;

    Are you working within a Child Theme?

  8. mbartizmo
    Member
    Posted 1 year ago #

    andrew: that fixed it! these two lines in my div#third section:
    position: absolute;
    right: 0;

    thanks!

  9. mbartizmo
    Member
    Posted 1 year ago #

    hmm. maybe the absolute position isn't the best way. when I resize the browser window (and make the window smaller), the right sidebar is the boss; it overlaps the content and refuses to go off screen (I guess that's what absolute does?)

    I guess I'd like to lock a minimal width for the #content, e.g. width: 600px;

    i'm going to try to figure it out how to get the right sidebar to display with negative margin values. if you happen to read this and want to shed some light, please do.

    btw: I don't think I'm working with a child-theme since I don't really know what that is. I'm using Sandbox 1.6.2

  10. mbartizmo
    Member
    Posted 1 year ago #

    I have failed in sorting out how to do it with minus margins. Can anyone offer a hand?
    http://www.englishcurrent.com/
    problem: the right sidebar (position: absolute;) overlaps the main content and even left sidebar when the window is made smaller. I would like the #content to maintain a minimum width of 550px or so and not be overlapped by the right sidebar.

    Here is the 3c-b.css (sidebar css) file:

    div#container {
    width:100%;
    }
    
    div#content {
    float: left;
    margin:0 260px 0 180px;
    min-width:550px;
    position: relative;
    }
    
    div.sidebar {
    overflow:hidden;
    width:160px;
    }
    
    div#primary {
    float:left;
    position: absolute;
    left: 5px;
    }
    
    div#secondary {
    float:left;
    }
    
    div#third {
    	width:250px;
    	position: absolute;
    	right: 0;
    }
    
    div#footer {
    clear:left;
    width:100%;
    }
  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    Looks like your layout is preventing you from apply minus margins.
    Consider a new (HTML) layout like this;

    <div id="wrapper">
     <div class="column">
      ...
     </div>
     <div class="column">
      ...
     </div>
     <div class="column">
      ...
     </div>
    </div>

    The wrapper should hold all three columns. No column should span 100% width.

  12. mbartizmo
    Member
    Posted 1 year ago #

    ... and would I include that HTML at the bottom of my page.php, in place of the "get_sidebar()" call? or would it go in the sidebar.php page?

    Thanks for your help with this.

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    You would need to restructure your current HTML, in which ever template it is, to use something more applicable for minus margins. If you try the 'new layout' suggestion, you need not use minus margins.

  14. mbartizmo
    Member
    Posted 1 year ago #

    I gave up; this thing was ruining my xmas =) I ended up using a two-column table (#content in one td, and #get_sidebar('right)' in the other td). the left sidebar comes in using a minus margin.

    This is how I had it before actually. Hopefully it's not some kind of html sin. It works at least.
    Thanks for your help
    MB

Topic Closed

This topic has been closed to new replies.

About this Topic