Container DIV's border won't stretch out of the window!

Hi.

I'm trying to achieve a fairly simple thing. I want my container div to have a border down its left and right sides. However when the content means the page stretches beyond the windows capacity the border disappears. It seems that the height of 100% does not refer to the content of the viewport, only to the window.

Have spent the evening checking out 'nearlys' online, but not found a solution near enough. I'm sure there must be something simple I'm doing wrong! please enlighten me! take a look at the problem here:
http://www.chrisslowe.uklinux.net/sofftest/variety.html

thanks

chris

 

try putting the div inside another div with both set for height 100%

or

try floating it

 

the 'div in div' solution results in the same thing:

um..there was going to be a link here but i'm not allowed to until i've made over 10 posts...so take the address from my previous post (!) and replace 'variety.html' with 'test.html'

not sure what you mean by floating it. I kinda get the floating for wrapping text around images, but not for general layout...?

Any more info? thanks, chris

 

I've looked at your test page. If you remove the position absolute from the inner div (layer2) and remove the height: 100% from both divs the page displays properly.

 

css float property:

http://www.w3schools.com/css/pr_class_float.asp

if draculus solution doesn't working, try setting float to none on your content div

 

thanks guys, but neither suggestion worked with the actual page i'm working on-variety.html (see my first post). draculus's works in the test page but because the content div, in variety.html, starts half way down the page removing position absolute shifts the content to the top of the page- not what i'm after. Setting the float of the content div to left,right,none,inherit doesn't have any effect... any more ideas?
ta, chris

 

I'm flat out of any that don't involve a hybrid CSS/HTML table solution

 

Then I think your stuffed. I've had the same problem before. You can fix it on standards complient browsers, but not on IE.

 

Looking at your page source all your content follows a normal sequence so you don't actually need to absolutely position anything. Just remove all the css you don't need eg position: & height: and let the page flow normally. You will need to float your logo and links <divs> accordingly. Your container <div> will then expand as you expect.

The only time you would need to use position:absolute in a simple layout such as this would be to place your content areas before your navigation/header panel in the source while displaying in the correct order on screen.

 

thanks arnica! I read up on normal flow, got rid of the absolutes and height values and the border stretched the whole length of the content. However now the opposite of my original problem is true. if the content is not sufficient enough to reach the bottom of the page then the borders end to soon(which is why i had the container DIVs height as 100%). check out variety.html to see.

What I want is a central column that has borders on its left and right edges, that reaches from the top to the bottom of the viewport, independent of whether the content. I'm sure its not that hard i must have seen it a thousand times...

 

Percentages refer to percent of the containing block. Everything will always have at least two containing blocks: the BODY element and the HTML element. Set both of those to 100% as well and that should fix the problem.

 

aha! thanks, i've got a much better understanding of how stylesheets flow. setting the relevant elements to 100% height, and removing the unnecessary positioning information (the absolute positioning and location of the top left corner) fixed it. thankyou all for your help.
Chris