Full height sidebar, and float left content

Community Forums Forums Design Tips and Tricks Full height sidebar, and float left content

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  sean nelson 2 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #7038


    So, what I want to do is create a child theme like http://dcurt.is/

    The issue is I want a full height sidebar on the left with a background image (currently, the background ends at the bottom of the sidebar, even when trying to set the height to 100%), and the content to float:left (when I float the content left, it replaces the sidebar, so it’s arranged as content/sidebar, when I want it to be sidebar/content).

    So, can I get help with:

    Full height sidebar
    Sidebar on the left, and then content to the right of that (while not floating it all the way to the right).




    This is kind of tricky. The simple solution is to create a background for the entire #inner div that is shaded in where the sidebar will be. You can see how this works with the Amped theme very well.


    • This reply was modified 2 years, 11 months ago by  nickthegeek.
    • This reply was modified 2 years, 11 months ago by  nickthegeek.

    sean nelson

    Not a complete answer to your question but thought I would add as it may help someone looking to simply extend the sidebar down 100%.

    This is what I did to do this on the http://www.surgelabs.com site:

    Full Height Sidebar in Genesis Via Custom Body class

    Theme: Outreach with html5 enabled:

    Step 1: Load following to functions.php


    * Custom Body Classes
    * @link http://www.billerickson.net/wordpress-class-body-tag/
    * @author Bill Erickson
    * @param array $classes existing body classes
    * @return array modified body classes

    function my_body_classes( $classes ) {

    if ( is_page() )

    $classes[] = “custom-content-bg”;

    if ( is_single() )

    $classes[] = “custom-content-bg”;

    return $classes;


    add_filter( ‘body_class’, ‘my_body_classes’ );

    Step 2: Add following to css

    /* I used this first css code for styling the main container using the custom body class. Not needed for the sidebar 100% extension.
    .custom-content-bg .content {

    float: left;
    background-color: #ffffff;
    border: 1px solid rgb(228, 228, 228);
    padding: 30px 40px 30px 40px;
    margin: 25px 0px 0 0;


    **This is necessary for 100% sidebar extension to work. You can add additional styling elements.

    .custom-content-bg .sidebar {

    background: url(“http://your-image-source.jpg”) repeat-y scroll -1px top #fff;
    position: absolute;
    height: 100%;

    Step 3: Add position relevant to .content-sidebar-wrap

    —original code—
    .content-sidebar-wrap {
    float: left;
    width: 860px;


    —revised code—

    .content-sidebar-wrap {
    float: left;
    width: 860px;
    position: relative;

    This was done using the Outreach theme. I have not tried it yet on any other Genesis themes, but I would expect that it would be similar.

    Hope it helps.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.