Forum Moderators: not2easy
I'm fairly new to css positioning, so I'd appreciate any help.....
I'm trying to create my first table-free page with CSS. I had a layout that I really really liked, until I started to put in the content and then it just fell apart on me.
The look I'm going for, is to have a div which frames the entire page with a border. I'm finding that if there is enough content to cause the browser to scroll, then the border ends in the middle of the content (ie at the end of the screen)--how do I fix this?
I saw other posts which suggested using a table for the framing, and I tried that with the same results. :(
Here's the code:
.frame {
border: #9999ff;
border-style: groove;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
background-color: #FFFFFF;
top: 10px;
width: 97%;
height: 100%;
display: table;
}
#content {
position: absolute;
width: auto;
clear: both;
top: 160px;
z-index: 1;
text-align: left;
margin-left: 175px;
font-size: 1em;
padding-right: 5px;
height: 100%;
margin-bottom: 0;
}
<html>
<body bgcolor="#FFFFFF" text="#000000" height="100%">
<div id="container" class="frame">
<!-- other absolutely positioned divs in here -->
<div id="content">blah blah blah</div>
</body>
</html>
Thanks for the help!
see for more info about 100% height:
[webmasterworld.com...]
Maybe there is a way to create what you are trying to achieve with pure CSS, but it doesnt support it well. CSS does not like dynamic heights depending on the browser window. If you really want to do it your way, I recommend a javascript that rezises the wrapping div according to what browser height the user has.
A list apart has an article about this technique.
Getting into CSS layout design is not just about converting tables to divs, its also about a new way of thinking and designing usable web layouts.
Mobull: I had read that thread before posting, and tried everything suggested and it still didn't work! But thanks for pointing it out.
Bonusbana: You may be right, I may still be "thinking tables" but like I said in my originial post this is my first attempt at a completely CSS page. I find that I learn new techniques better/faster when I compare them to and combine them with what I already know. If you have a suggestion of how I can lay this out better in CSS, I would be happy to give it a try!
I was able to get the frame to resize with the window in all browsers (after a really long night!), but, the problem still remains that if I add content which is longer than the window and needs to scroll, the frame stays the length of the window and does not expand to the length of the content.
Does anyone have any other ideas? Or can this just not be done?
