Forums > CSS Sidebar Background

Forums > Resource Center > Webmasters' Corner

Mikeplyts

Aug 13 2010, 11:34 AM

So, I'm working on a redesign, and I ran into a little problem. I have a sidebar that has a repeating background. This background is supposed to run down the entire page length. And, I thought it did. Now, I realized if the content is longer than my sidebar, the background gets cut off. Not only that, but on higher resolutions, the background also gets cut off. I usually don't have a CSS problem, but I'm stumped.

Basically, this is what I have:

CODE

div#sidebar {
    background: url('images/sidebar.png') repeat-y top left;
    width: 280px;
    height: 100%;
}

That does kind of like how I want it to, but not quite the result I want. I've tried removing the height property, and that kind of worked as well but still, not good enough. I tried setting the html and body tags to a height of 100%, but no dice.

Any ideas?

schizo

Aug 13 2010, 05:55 PM

I think you need to add overflow:auto. Your issue sounds like one I had a little while ago, and that's what I did. If it doesn't work, then it's not the same thing.

AbbeyMarie

Aug 13 2010, 06:30 PM

^That (I always thought if you had a set height you had to set some kind of overflow for it to work?) I really haven't brushed up on CSS like I should.

mipadi

Aug 13 2010, 07:10 PM

height: 100% just means that the height of the element will be the same as the height of the containing element, which may or may not be equal to or longer than the height of the entire screen. It might be easier to give a link to the page in question, or at least the entire source code, since the answer may rely on other elements on your page.

waccoon

Aug 15 2010, 01:43 AM

div#sidebar {
background: url('images/sidebar.png') repeat-y top left;
width: 280px;
height: auto;
padding-bottom: whatever;
}

Mikeplyts

Aug 15 2010, 10:08 AM

^ I see, but unfortunately, my sidebar isn't within another container. It's in the body section, instead of a DIV. And the way I have my markup displayed, I can't just seem to get it within my main DIV.

I bet I could use Javascript to get the height of the main DIV (or body, for that matter) and append it to the CSS of the sidebar DIV. But, that would be a hassle.

waccoon

Aug 15 2010, 01:01 PM

Can you post the code, please?

Mikeplyts

Aug 15 2010, 05:10 PM

In its most basic form (I don't want to bore you with any other unnecessary codes and I assure you, there really is nothing else affecting the sidebar), here's the CSS and HTML.

CSS:

CODE

html, body {
    background: #000 url('images/background.gif') repeat top left;
}

div#sidebar {
    background: url('images/sidebar.png') top left;
    margin: 0 0;
    width: 390px;
}

div#main {
    margin: 100px 450px;
    width: 740px;
}

HTML:

CODE

    <div id="sidebar">
        <p>Here's some stuff in the sidebar. Usually, it's a lot less than what's in the main content area.</p>
    </div>

    <div id="main">
        <h1>This would be a title.</h1>
        <p>This is some text that, in general, would surpass the height of the sidebar.</p>
    </div>

I'm not really sure what could be the problem. And yes, I also used Michel's advice to not define a height nor a repeat type but that didn't work either. I think it may be because of my DOCTYPE declaration. I'm using a strict DOCTYPE, if that has to do with anything. Oh yeah, everything is valid (I checked using the W3C Validator).

Mikeplyts

Aug 16 2010, 06:20 AM

Nope, didn't work either. Anyway, I have to use a strict DOCTYPE because I'm using Cufon for rendering a font and the line-height was a bitch. So, according to their API, line-height wouldn't work without a strict DOCTYPE. Oh well.

Anyway, I kind of just gave up on this. I threw in a little jQuery to fix it.

CODE

$height = $(document).height();
$('#sidebar').css('height', $height);

Not a biggie, so whatever. Y'all can close this.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.