Simple border goes 100% of screen, not content

[zyph]

Hi ;)

I'm playing around with css (don't mind the text at the page, it's just random).

Now I have this problem. My site consist of div#main (700px/height100% and centered)

I want an image border, but I can't seem to get the border to go all the way down with the content.

It's div#kant_left and div#kant_right.. (kant = border in danish ;))

Cheers!

- Oskar

[D_Blackwell]

Can you post the relevant code intact (which will show it breaking)? My first inclination is to take a hard look at the {height: 100%;}. Does it break in one browser or all?

[zyph]

Oh, stupid me. Forgot the link of course ;(

Here ya go: [zyph.dk...]

[1]
html,body {
 height: 100%;
}
[/1]
/* Main area */
[1]
div#main {
 width: 700px;
 height: 100%;
 background-color: white;
 margin-left: auto;
 margin-right: auto;
}
[/1]
/* My 2 columns in main */
[1]
div#mainleft {
 width: 67%;
 float: left;
 border-right: 2px solid #f1f1f1;
}
div#mainright {
}
[/1]
/* My 2 borders that wont work */
[1]
div#kant_left {
 width: 30px;
 height: 100%;
 background-image: url('body/kant_left.gif');
 background-repeat: repeat-y;
 float:left;
}
div#kant_right {
 width: 30px;
 height: 100%;
 background-image: url('body/kant_right.gif');
 background-repeat: repeat-y;
 float: right;
}
[/1]