Forums

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
}

JoshWhite

I think the problem is that you are positioning it absolutely. You should be able to just position them with floats and then when you clear them they lined up for me. Something like this:

#post_content {
display: block;
float: left;
width: 600px;
}

#sidebar {
display: block;
float: right;
width: 410px;
position: relative;
overflow: hidden;
border-left: 1px solid black;
background: #AAA;
}

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.

wolfcry911

why do you need the heights to match? Josh is right, remove the AP (you can also remove the display: block; )

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.

wolfcry911

how about placing a border on both the content (right side) and sidebar (left side) and pull the sidebar over 1px to the left so that the borders overlap. Then it doesn't matter which is longer.

lucaswynne

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

treehouse : what would you like to learn today?

Forums

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