I have inherited a website whose layout is defined using frames. I want to rebuild the site using DIVs. I want to keep the current structure of the layout, which is a fixed header across the top of the page that does not scroll off the screen. On the left, there is a narrow navigation area under the header. This navigation area also does not scroll off the screen. What is left is a content area that takes up the remainder of the screen, and this area is scrollable if necessary. Hense, the browser scrollbar should never appear, since the Content area scrolls itself if necessary.

I am able to create the fixed top header area using an absolute positioned DIV (width="100%", height="80px") and am able to create the fixed width left navigation area using another absolute positioned DIV. However, I don't know how to set the Content DIV to fill the remainder of the width and height of the screen regardless of the screen resolution, keeping in mind that I don't want the browser window scrollbar to ever appear, bu rather have a scrollbar appear on the Content DIV if the content goes below the set bottom of the DIV. I can't set the height and width properties to fixed values because this would only work for one screen resolution. Also, I cannot use a percentage for the Content DIV height and width, because again, the value would be different depending on the screen resolution (given the other 2 DIVS have fixed values for ht and width). I don't want to use javascript to detect screen resolution (and set the width and height accordingly) because some people turn off scripting in their browsers. Is there a way to do this using CSS? Or some other cross browser method? I have very little experience with CSS. If that is where you point me, then can you recommend a good online resource?

Thanks!!!

yeah use the css overflow method.

#contentboxes { overflow:scroll; width:100%; height:80px; }

Thank for the reply, but you didn't answer the question I asked. First off, the Content box cannot be 100% wide, because the navigation box to the left of it is 150 px wide. And it is not the content box that is 80 px tall; that is the header box which is above the Content box.

I could solve this if I was allowed to specify the Content box (DIV) width="100%-150px" and the height="100%-80px". But I tried something like that and it failed.

Thx in advance.

try adding

margin-left: 150px;

thx for the reply. I added the margin-left as you suggested, but it did not behave as I hoped.

Here's my DIV code:
<div id="content" style="position:absolute; z-index:4; left: 0px; top: 0px; margin-left: 180px; margin-top: 85px; width: 100%; height: 100%; overflow: auto;">
huge amount of text formatted with <p></p> tags
</div>

you can see a simplified sample of the page at:
http://home.columbus.rr.com/toinfini...simpleTest.htm

The page still goes beyond the right edge of the screen and below the bottom edge of the screen.

For those reading this post the first time, I don't want the DIV to take up the whole page. Not shown in the sample page, I have a header DIV above the DIV in the sample and a navigation DIV to the left of the sample DIV.

please help!!!

instead of having the width of "100%", give it a reasonable width, say "600px" or "650px". that should fix ure problem.

I don't want a fixed width!!!!! I want the width (and height) to adjust based on the screen resolution or size of the browser window (much the way frames would allow). And I don't want to use javascript because some people have scripting turned off.

Does no one out there understand the problem I'm faced with and what I'm trying to do? Someone has had to of solved this before.

http://home.columbus.rr.com/toinfini...simpleTest.htm

Please help.

then make the width 60 or 70 % instead of 100%

drewrockshard, thanks for your replies, but you just are not following me. So, please kindly don't reply anymore. This is not intended to sound harsh, but you are simply just adding clutter to this thread at this point. Picking some percentage out of the air will not make the DIV fill the *exact* remainder of the screen. I don't want something that is *sorta* close, that *may* work well for one screen resolution, but not so well in another. There has to be a programatic solution to this. So, no, I'm not looking to pick a fixed pixel width pulled of the air or an arbitrary percentage width.

Let me try this again. Here is a frames example that I want to implement using DIVS. I want the site to look professional, so I don't want to pick arbitrary pixel widths or percentage widths

http://home.columbus.rr.com/toinfini...mpleFrames.htm

Here is a rough example using DIVS:
http://home.columbus.rr.com/toinfini...simpleTest.htm

The challenge is to get the Content DIV to have a width that exactly fits up against the right edge of the window/browser, regardless of screen resolution. As you can see in the frames example, that is exactly what it does.

And I don't want to use javascript because some people have scripting disabled.

Thanks in advance!!

dude, you are the one asking for help. dont ask me to stay out of it. im not going to stay out of it. maybe if you were more clear on things and actually maybe buy a book or read some articles, you would know how to do this. theres plenty online. the way you are coding in the first place isnt even standard compliant, which therefore is another flaw in your code

so instead of telling me that im cluttering the forum, why dont you get your markup straight and post posts that actually make sense. be more detailed and dont tell me do get out.

now let me start slowly, about ure javascript problem, dont worry about others having it off. you just give them a message saying that their scripting is turned off and tell them in order to have use of the site, then it must be enabled.

next, i dont believe in using javascript for this. so good point. why exactly do you want a frame? why not just content that goes down? i dont see a reason for a frame. NOTE: i know its not a "frame", but while using the auto for overflow it makes it a "frame". my thing is, why dont you just use some padding and just code it using divs with no overflow. it just flows on down the page. i understand that you want everything on just one page, as in no main window scrollbars, but with the frames...isnt this happeneing anyway. instead of having the main window srolling, you are having an inline window (the frame, that really is a div) scroll down. you said you want professional, and that isnt professional.

If you try a different percentage each time you will get it to fill the exact remainder of the screen.
....will you not? I'm not entirely sure... sorry


BTW it isn't nice to tell some who is trying to hlp that he/she is cluttering the forum. People help in their own time so they should recieve a little more appreciation...

Would the powers that be please close this useless thread?

Making sure the browser scroll bar does no appear will be down to how you set your element heights. Do bear in mind that 600px is not a lot of vertical screen to play with.

A couple of Frame templates in CSS and XHTML strict. No absolute positioning in sight.

thx chrishirst,
I appreciate your (professional) help emmensly. This is exactly the kind of pointer I was looking for. I knew there had to be a solution with a professional look and feel. I've worked in (intranet) web design for 7 years with java developers supporting the designs, and I knew it could be done. I just did not have the CSS and DIV experience myself to realize a quick and easy solution. Nor do I have access to the developer team anymore.

I can't express enuf how appreciative I am that you actually read all my posts, read them completely and truly answered the question, not just reading half way down and then throwing out some half baked suggestions. I was thinking last night that maybe the key was to use relative positioning. Glad I got your post before I struggled thru playing with relatively positioned DIVS.

I'm glad that I finally ran into a true webmaster on this webmaster-talk forum. I was ready to try another site to see if I could find any experienced knowledgable developers.

THANKS, THANKS, THANKS!!!