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:

Code:

<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

Code:

<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.

Thread: Layout to fit the browser window

Thread Tools

Search Thread

Layout to fit the browser window

Bookmarks

Bookmarks

Posting Permissions