What is wrong with this CSS code?

Hi all. I am having a very hard time getting this sidebar image to go all the way down each page.

You can view the site Here

Here is the CSS associated with the sidebar (sorry it is partially in french)

When specifying "433" pixels as shown above it will display fine on the main page but will not extend all the way down on any sub page like I want it to. When specifying 100% it will completely cut off like in the screenshot located Here

Any ideas why this isn't working? The css isn't coded the best and after using FireBug I noticed centergauche and menu_bar are kind of one in the same, or on top of each other, or something

If I specify 100% height for centregauche and menu_bar it completely hides the menu_bar like This (just like the other screenshot)

Any help is really appriciated!!!

 

Go to www.copyblogger.com and right click anywhere in the body and then view the background image. Look closely at the thin horizonal background image and you'll notice a thin gray horizontal "box" and then whitespace and then another then gray horizontal "box". The image repeats on the y-axis and in doing so...creates two vertical sidebars that run the entire length of the page.

My guess is this is what you'll need to do. I suspect that there might be a better way but if I was going to fix the problem that you're having, that's the way I'd do it.

 

tmeyer thanks so much for your input!! I will be trying this first thing tommorow and will post the outcome. I have been messing with this for so long and having nothing but problems I am willing to try anything. Rep added for your helpful insight!

 

i didn't look at your code, but my guess is you need to add a clear:both at the end of the the main container that contains the sidebar

in other words, try sticking a <div style='clear:both'></div> before the end of the main container

 

forel. Thanks so much for that!! Should I be adding that to the style.css or the background.tpl? (The background.tpl file is used as sort of the template on all pages.

thanks so much again!!

 

The first suggestion is called "faux columns" (look! French!) lol. It's got its disadvantages but is the most popular way to make floating sidebars look like 100% height. You can google "CSS faux columns" and you'll get a bazillion sites popping up.

The second suggestion is also good-- WHEN your sidebar/float is LONGER than the main content which is holding the column image. The column image only extends to the the height of the container, which MOST of the time will be longer than the content in the sidebar. But sometimes that's not true, so then you clear the float with the "clearing div." Basically, a float will be longer than its container if it can. It will never respect the height of the parent container, and the parent container will never try to make itself long enough to enclose the float (except in IE6 because IE6 is dumb and doesn't know any better). However, if there's a non-floated element with the clear command just inside the float's container, then the container is forced to enclose everything. It will not respect the float's height, but it will the clearing div. It's non-semantic HTML but it's simple and does the job on every browser. The other ways often need extra code to deal with one browser or another not obeying correctly.

*Edit, you would add the div like you would add any other html. The example forel gave you has an inline style already, so you wouldn't need to add anything to the css. However, you can also just have the div with its ID (and stick "&nbsp;" inside so the div isn't totally empty-- like this: <div id="clearingdiv">&nbsp;</div>) and in the css you'd say something like #clearingdiv {clear: left;} (or right, wherever the float is).

 

Thanks for info guys. Excellent tips there. I have tried them all and nothing seamed to fix it. I guess I will have to keep messing with it. Thanks again!!

 

I'd say your issues stem from deeper underlying problems in the layout - in addition to as stomme suggested, the need to use faux columns... Of course, I thought the site was completely broken until I viewed the source, saw all the flash embeds and remembered I browse with plugins DISABLED because flash as presentational elements PISSES ME OFF.

FIRST, before you worry about anything else, VALIDATE. 28 validation errors, and from the start it's obvious invalid code... like trying to put a class on the HTML tag (there is no attribute 'class' for HTML), unclosed tags with an XHTML doctype... then there's the other telltales of 'doing something wrong'

For example, if you have to resort to:

<!--[if lte IE 6]>
<link href="css/ie5-6.css" rel="stylesheet" type="text/css"/>
<![endif ]-->

you are PROBABLY doing something wrong.

If you don't have any actual header tags anywhere on the site, you are probably doing something wrong.

If on a properly indented page you are tabbed in more than five times before you actually have anything resembling CONTENT (you have seven), you are probably doing something wrong.

If you do this:
<html class="centrage">
<body class="centrage">
<table class="centrage">
<tr class="centrage">
<td class="centrage">

You are DEFINATELY doing something wrong.

and if you have a website that plays sound - YOU ARE OUT TO ALIENATE EVERY SINGLE PERSON THAT VISITS THE ****ING PAGE. (there's a reason sound on websites is in the top ten list of how to code a crappy site)

****ing flashtards. There's a reason it's called 'flash' and not 'substance'.