Repeating background from an indent

I’ve seen to have come across a CSS error, which I haven’t read about before and that seems to be the case in all browsers (IE/Win, Firefox, Opera).

First a little background. When you have a typical two-column layout website, with a menu on the left and you want the background of that menu to flow all the way to the bottom for as long as the content is, you might want to do it like this:
Create an image for as wide as the menu should be and 1px high. Use it as a background on the <div> that wraps arround the content and the menu. When you then do a repeat-y of the background image you get a nice background that streches all the way down, no matter which of the menu or content is the longest.

The HTML looks like this:

<div id="wrap">
   <div id="menu">Menu</div>
   <div id="content">Content</div>
</div>

Nice solution, right? Unless, you need a little indent at the top of the menu.
Putting a margin-top on the wrap-div won’t give the result needed, since it will also indent the content-div (unless you relative position that one with a negative top, but you definitely not want to do that).
Giving a margin-top to the menu-div gives you the correct indent, but the background doesn’t move with it, since it is on the wrap-div.

The proper solution would be giving this CSS to the wrap-div:
background: color url(image) repeat-y indent 0;
Where color is the background color you want, image is the url to the background image I talked about earlier, repeat-y is to get the vertical box effect, indent is the number of pixels/ems/… you want to indent on top and 0 is to keep the background sticking to the left of the box (you cannot mix top, left, right,… with numbers hence the 0 instead of left).

Now that works super, in theory. But in practive, no indent. The reason for this is the repeat-y.

I’ve come up with a doable fix, when you want the indent to be a certain color on top (transparent doesn’t work too well in IE, otherwise that would have worked too). Give the menu-div a border-top with the size of the indent you like.

That did it for me, now if you have a better way, let me know.

4 Responses to “Repeating background from an indent”.

  1. And why not just “width: 100%”? That works in all browsers I know of…

  2. I don’t see how width would help with this height problem.

  3. I’m struggling with this problem too, and I wonder if this is what you’ve done with this blog – because then it doesn’t work, does it..? The background of the left hand coloumn does not go all the way down?

  4. No, on this site, I’ve tried something else and indeed as you can see. That didn’t work.

Leave a response