Making content go to 100% after sidebar ends

[carriei]

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

[AnitaC]

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

<!--nextpage-->

---

Need help with customization or troubleshooting? Reach out to me.

[carriei]

Yes, I suppose that would accomplish that though that's not really what I was hoping for. 🙂

[SoZo]

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

[carriei]

That makes sense - I'll try that.

[sean nelson]

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.

[Author]

Posts