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 1 year, 3 months ago.

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

    Post count: 8

    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).



    Post count: 756

    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 1 year, 12 months ago by  nickthegeek.
    • This reply was modified 1 year, 12 months ago by  nickthegeek.

    sean nelson
    Post count: 19

    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.