stretching border-left all the way down?

[ipecac]

I'm using this piece of css for my right margin menu:

#menu {
[b]border-left: 1px dotted #000000;[/b]
padding-left: 15px;
margin-right: -15px;
float: right;
width: 170px;
font-size: 10px;
}

But when the main content reaches further down on the page than the contents of the right menu, the border doesn't continue down. Instead it gets cut off where the content of the menu ends, and I can't figure out how to make it "stretch" with the rest of the content - i.e making the height of the menu follow the height of the page dynamically as it changes. Wow, did that make any sense?

I tried setting the height of #menu to

height: 100%

, but that didn't do anything at all.

[fish_eye]

You could put the border on the right hand side of the content.... but then if the content is less than the menu you will have a very similar problem.

That said, the menu probably provides a visual "border" so the lack of dotted line in this case may be negligible.

[ipecac]

Right, I'll have a similar problem. Can't I force it to stretch somehow? Thanks for the suggestion though :)

[communus]

I can't figure out how to make it "stretch" with the rest of the content

Hi there, this is my first post on this forum.

I've suffered the same problem on a three-column layout I've been working on recently. I cheated and added empty paragraphs to the end of the navbar in order to extend its length, and hence its border. I can imagine this would be a pain if the navbar content was generated automatically though.

I'm sure there's a better way to do it, but I've only taken up CSS in the last few months myself, so I'm still finding my way(!)

HTH,

John

[willybfriendly]

Yep, it's times like this that table based layouts shine. Given how common this type of layout is, one would think that the CSS workgroup woul have come up with a spec that would handle it.

If there is a straightforward wayto accomplish this I have yet to find it...

WBF

[fish_eye]

display: table ;)

But seriously - the situation (or "problem" if you prefer) applies to tables as well in my experience.

[ipecac]

what really bakes my noodle is why height: 100%; does absolutely nothing. shouldn't it do something, rather than nothing? :)

[bubblebug]

Why not:

a) Use tables and css?

b) Have the menu div inside the content div and the content div have a background image repeat down the side you want the menu. Make the menu div fit inside the background repeat image.

I would use a table with an id and use css to control the style of it. I am not too hung up about tables.

[ipecac]

I'm not too hung up on tables either, but I went with fish_eye's solution and it actually worked out pretty smooth, so I'm sticking with that for the time being.