Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

CSS Problem WordPress

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/