• Resolved andy3000

    (@andy3000)


    I’m trying to add a sidebar to the front page at lifeinthisplace.com
    Something seems to be keeping it from floating up all the way and I can’t figure out what.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Start off with putting the sidebar HTML into the wrapper HTML element.
    The wrapper should be the parent for all elements you want within the 925px width (as defined).

    with sidebar problems, usually check the site’s validation:

    https://validator.w3.org/check?uri=http%3A%2F%2Flifeinthisplace.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    errors such as ‘end tag for element “div” which is not open’ are pointers to some coding errors, either in the templates or in the content of the posts (or pages), or sidebar widgets, or plugins.

    possibly start again with a clean copy of your theme; then develop your idea step-by-step and check inbetween for layout and validity.

    https://codex.www.ads-software.com/Validating_a_Website

    Thread Starter andy3000

    (@andy3000)

    Start off with putting the sidebar HTML into the wrapper HTML element.
    The wrapper should be the parent for all elements you want within the 925px width (as defined).

    Thanks did that then looked at which element is causing the problem. It is the <div id=”slide_wrapper”
    When I comment it out the sidebar moves up.
    The only thing I have been able to do that leaves the slide wrapper in and moves the sidebar where it belongs is to change from position:relative to position:absolute for the slide_wrapper. When I do that the slide-wrapper covers the menu.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Really you need to wrap your divs into 2 columns.
    You should wrap <div id="slide_wrapper"> ... </div> and <div id="big-column"> ... </div> into a div called <div class="col">.

    Then wrap the sidebar into another <div class="col">.
    Then set the CSS to float .col left

    .col {
     float: left;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘sidebar being pushed down’ is closed to new replies.