This Should Be Simple, But I Can’t Figure it Out!

[lucaswynne]

I’m absolutely positioning my sidebar so it will match the height of #post_content… aka my posts.

This works on virtually every page except when the post content is shorter than the sidebar, example:

http://themeforward.com/demo2/2011/07/08/link/

(sidebar content gets cut off)

I realize if I remove overflow:hidden from #container I will see the rest of the sidebar… but this will also prevent the divs from matching height and hide the border and background color of the sidebar. Adding overflow:hidden to the sidebar itself hides the sidebar when on post pages.

I know there must be a simple way to fix this with CSS (and possibly some other div) but I have been brain-drained on this issue now for two days. I’ve tried jQuery, but I know CSS can do it (possibly with another div?). What I need is simple: to display all the sidebar content and match the column heights at the same time.

#container {

width: 1126px;

clear: both;

position:relative;

overflow:hidden;

margin:35px auto

}

#sidebar {

display:block;

float: right;

width: 410px;

position:absolute;

border-left:1px solid #000;

background:#AAA;

top:0;

right:0;

bottom:0

}

[lucaswynne]

Thanks for the response Josh. Actually, I need their heights to match so the sidebar needs to be positioned absolutely to achieve this with CSS. I need to find a way to make the sidebar content still expand to show all content even while using overflow:hidden on #container.

[lucaswynne]

I’m building a WordPress theme with options including switching the position of the sidebar. I want to be able to have the border on the sidebar expand to the height of the sidebar/post content (whichever is taller) without using the trick of just adding a background image to the container.

[lucaswynne]

For future reference (and Google searchers) the solution can be found here: http://www.alistapart.com/articles/holygrail/

[Author]

Posts