Making content go to 100% after sidebar ends

Community Forums Forums Design Tips and Tricks Making content go to 100% after sidebar ends

This topic is: not resolved

This topic contains 5 replies, has 4 voices, and was last updated by  sean nelson 10 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #17381

    carriei
    Participant
    Post count: 7

    I’m trying to figure out a way to make the content area go to 100% after the sidebar ends.  I have various sites where the content is much longer than what I have in the sidebar, so there ends up being a bunch of blank space for the rest of the way down the page.

    I tried a couple of things like making the sidebar a fixed height and making the content 100%, but that didn’t work.

    Anyone have any ideas about how to make the content take over where the sidebar leaves off?

    Edited to add an example site: http://212madisonst.com

    #17405

    anitac
    Participant
    Post count: 7004

    You could add “pagination” to the posts by adding this code into your posts. So if the content is really long you can split it into pages with page links at the bottom – 1, 2, 3, 4

    [php]<!–nextpage–>[/php]


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #17481

    carriei
    Participant
    Post count: 7

    Yes, I suppose that would accomplish that though that’s not really what I was hoping for. :)

    #17509

    SoZo
    Moderator
    Post count: 1573

    You would need to move the sidebar into the content div itself and float it.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #17596

    carriei
    Participant
    Post count: 7

    That makes sense – I’ll try that.

    #63548

    sean nelson
    Participant
    Post count: 16

    This is a old post but in case anyone is sill looking for an answer here is how I did 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%;
    margin-bottom:25px;
    }

    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 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.