How do you control the height of DIV section using CSS?

[SwissCheeseo]

I'm trying to use DIV sections and CSS to add a border along the left side of a web page using two image files. Both images have a width of 100 pixels. The first image has a height of 568 pixels and should appear at the top left of the screen. It should not repeat. The second image should appear directly below the first, has a much smaller height and should repeat until it reaches the bottom of the page. Together they make a gradient border. I'm using two DIV sections to divide the top and bottom sections. I've given the first one a height of 568 pixels and I've given the second one a height of 100%. My problem is that the second section extends beyond the end of the main page. It's as if setting the height for the second section makes the DIV the height of the screen but then places it 568 pixels away from the top, making it hang to far down on the bottom of the page. I hope I have explained this well enough for someone to be able to understand.

[jasonjas]

nevermind...just make both of them 100% size in height and see what happens. I've noticed a while ago that using two different sets of numbers (percentage/pixels) will mess it up, sometimes.

[whozurdaddy187]

My suggestion would be to have innerlying Divs, the inner Div (use it for your top) will overwrite the outer Divs properties... I had to to do for a footer.

[bob_eponge64]

You don't need a tag for each one of your images, just one class for each. Just insert both your images into one div, even side by side, and paste following code in your style tag: .border-top {float: left;margin: 0px 15px 0px 0px;}.border-bottom {float: left;margin: 0px 15px 15px 0px;}Then you apply the right .class one for each image. I'm sure you will like the result, this will place them left side, together and will give place for text or whatever you like on right side as well as below the second one.