Huge vertical gap in sidebar content

  • Resolved Gone Fishin

    (@terryg-1)


    10 years, 6 months ago

    I believe this problem is due to the main #container (in style.css) being floated left and the sidebar being allowed to float right.

    Any CSS ‘clear:both’ in a widget in the sidebar will shove the content after the clear to horizontally below the bottom of the main content container (left column).

    The ‘clear:both’ could be in any text in a text widget, or could be added to the page’s HTML by a plugin like a tabbed widget plugin such as Tabs Shortcode and Widget. I discovered this when adding SlickQuiz to a sidebar widget.

    I imagine it would take significant rewriting of the theme to remove the dependency on floats for column positioning.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Gone Fishin

    (@terryg-1)

    I may have found a simple solution to this issue.

    Just add the following into the style.css file:

    1. to ‘#sidebar’, add “overflow: hidden;”, and
    2. to ‘#footer-wrap’, add “clear: both;”.

    The “overflow:hidden;” causes the sidebar to encapsulate (contain within itself) any clears (ie. “clear:both”) so that they do not clear the ‘float’ of the #content column.

    Then, adding “clear: both;” to the footer container is needed to keep it from being positioned immediately under the sidebar instead of underneath the content also as it should be.

    Note: modifying any theme’s files directly risks losing your modifications when the theme is updated. It is preferable to create a child theme with your own style.css file that contains at least:

    #sidebar {
	overflow: hidden;
}

#footer-wrap {
	clear: both;
}

    I have tested this fix with Firefox and Opera but not with different screen sizes. It would be nice to know if it works for others as well.

    Now if ThemeZee could make those changes to this great theme, we could mark three topics as “resolved” ??

    I hope that helps.

    Thread Starter Gone Fishin

    (@terryg-1)

    Duh! There is actually a very simple way to modify the CSS without hacking on the theme’s style.css file and without creating a child theme.

    I had overlooked this previously as I do not usually use the custom CSS feature that some themes have; like zeeDynamic.

    Go to Appearance -> Theme Options, then select the General tab and scroll down to the Custom CSS box. Enter:

    #sidebar {
	overflow: hidden;
}

#footer-wrap {
	clear: both;
}

    And save your changes. Done ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Huge vertical gap in sidebar content’ is closed to new replies.