Ask your WordPress questions! Pay money and get answers fast! (more info)

CSS Problem

Go to this link and click where it says "2 comments" in the sub-title: http://themeforward.com/demo2/2011/01/17/lobortis-tellus-diam/
When the link that brings the user to the comments is clicked it doesn't just scroll users down the page, it brings them to what APPEARS TO BE a separate page (even though it isn't a separate page). This is caused by the extreme margin/padding I am using in #sidebar and #post_content which I am using for equal height columns... http://www.positioniseverything.net/articles/onetruelayout/equalheight

I need a fix for this while still using the equal height columns css I am currently using.

#container {
overflow:hidden;
margin:35px auto
}
#sidebar {
width: 410px;
display:block;
padding-bottom: 32767px;
margin-bottom: -32767px;
float:right
}
#post_content {
display:block;
padding-right:25px;
padding-bottom: 32767px;
margin-bottom: -32767px;
margin-right:25px;
border-right:1px solid #EEE;
float:left;
width: 660px
}
#commentlist {
list-style:none;
width:100%
}

Answers (5)

2011-09-23

Charles Klycinski answers:

Try to use some better option for equal height columns

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks


Lucas Wynne comments:

I've already been down that route. I'm looking for a fix for the current CSS I'm using, not for a separate solution.

2011-09-23

Gr├ęgory Viguier answers:

Hello.

I think the question is "why do you need equal height for sidebar and content?". It doesn't appear to have a design purpose, or may be I missed something.
If you don't need it, just delete your extreme margin-bottom and padding-bottom. It seems to work without it.


Lucas Wynne comments:

Because I'm building a highly customizable theme with theme options. Sidebar border and sidebar background are part of those options - therefore I need an expandable sidebar. So, that's not really the question. Thanks though.

2011-09-23

Bill Stavroulakis answers:

If you try?


#post_content {
display: block;
padding-right: 25px;
padding-bottom: 0px;
/*margin-bottom: -32767px;*/
margin-right: 25px;
border-right: 1px solid #EEE;
float: left;
width: 660px;
}


Lucas Wynne comments:

Does not work.


Bill Stavroulakis comments:

Try this

#sidebar {
display: block;
float: right;
/*margin-bottom: -32767px;
padding-bottom: 32767px;*/
width: 410px;
}


#post_content {
display: block;
padding-right: 25px;
padding-bottom: 0px;
/*margin-bottom: -32767px;*/
margin-right: 25px;
border-right: 1px solid #EEE;
float: left;
width: 660px;
}

#container {
/*overflow: hidden;*/
margin: 35px auto;
}


Lucas Wynne comments:

This is very, very close. The one problem it's causing is there is now no bottom margin between on #container.


Lucas Wynne comments:

Actually, nevermind. This doesn't allow styling of #sidebar and as a result isn't close at all.


Bill Stavroulakis comments:

Well for the padding on the bottom you can use

#post_content, #sidebar {

margin-bottom:20px;

}

Now since it doesn't allow you to style the #sidebar you can add css (inline or a with a style tag) before the </head> tag so you can override their code like

<style type="text/css">
#sidebar,#post_content {
margin-bottom: 0px;
padding-bottom: 0px;
}
</style>


Lucas Wynne comments:

Sorry, this doesn't work. I'm trying to style a sidebar that expands the entire height of the content.

2011-09-24

S├ębastien | French WordpressDesigner answers:

i don't see any problem... where is it ?

2011-09-26

Francis Albores answers:

i'm redirected to 404 Error when i visited your site
http://themeforward.com/demo2/2011/01/17/lobortis-tellus-diam/