Log in

View Full Version : Layout to fit the browser window


dbmv
01-29-2007, 09:27 PM
I'm trying to create a page that will fit inside the browser window with a panel along the top, another along the left, and an iframe that uses the remaining space. This is exactly what I want to do: http://www.cabl.com/bar/ -- only that site is done with tables and I'm trying to do it with CSS only.

I'm a noob just learning so maybe it's too advanced for me. The closest I've gotten is:


<div style="top:0; left:0; height:40px; width:100%; z-index:3;"></div>
<iframe src="left.htm" style="position:absolute; top:0; left:0; width:150px; height:100%; padding-top:40px; z-index:2;"/>
<iframe src="main.htm" style="position:absolute; top:0; left:0; width:100%; height:100%; padding-top:40px; padding-left:150px; z-index:1;"/>


That works as far as placement but for some reason the frames are enlarged to more than width/height of the window (by exactly the amount of padding) so the window must be scrolled. I tried changing "padding-" to "margin-" and same result.

Any tips, places to look, or even a "You can't do that with CSS stupid!" woud be greatly appreciated.
mburt
01-29-2007, 09:39 PM
<html>
<head>
<title>Your Page</title>
</head>
<frameset rows="64,*">
<frame name="banner" src="banner.htm" scrolling="no" noresize target="contents">
<frameset cols="150,*">
<frame name="contents" src="left.htm" target="main">
<frame name="main" src="main.htm">
</frameset>
<noframes>
<body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body>
</noframes>
</frameset>
</html>
The only change you'll have to make is to include a "header.htm" for the top of your page. You may have to change your doc-type.
dbmv
01-30-2007, 12:56 AM
Thanks mburt, I know I could do it with a frameset but I'm trying to avoid that. The table method seems to work fine too but I was hoping for a better way to do it. I'm just learning CSS in depth and hoped I could make it work. CSS seems real nice in theory but too many problems to implement in the real world as yet. I should probably stick with tables I guess.
mburt
01-31-2007, 12:40 AM
I should probably stick with tables I guess.
Or, just use DIVs. Read this (http://www.hotdesign.com/seybold/index.html).