6 replies [Last post]
werkkrew
Offline
newbie
Last seen: 17 years 16 weeks ago
Joined: 2004-03-02
Posts: 6
Points: 0

Well, of course, as usual, I can get everything to work as expected in Mozilla, but not IE. Not without a lot of sloppy javascript at least.

Here is the problem

Essentially, I have a large div that has 2 children. The lower child is a fixed size, I want the upper child to fill in the rest of the space in the window (no matter if there isnt even any content to fill that area) without going off any of the edges.

So far, I have been trying everything for about 2 days and I cant get anywhere.

The idea is, I want the "content" div to act like an IFrame (using an Iframe itself gave similar results) I want it to be as big as it can be based on the window size, however, not get any bigger. Regardless of how much content there is or is NOT in that window.

I have gotten several things to work, but im not real happy with how its coming out.

An example with no content in the content area:
http://www.werkkrew.com/BetaSite/layout/index5.html

An example with lots of content in the content area:
http://www.werkkrew.com/BetaSite/layout/index6.html

These links will give you an idea of what im trying to do, Ideally I want the interface to FILL an entire page, all the time, but never be larger, or smaller then the current window size.

Like I said, I have a version that works beautifully in mozilla.

Here is how it is now (not its most functional state, but the most recent)

PARENT DIV:

#outerBox {
	background-color: #CCCCCC;
	margin-right: 5px;
	border: 3px solid #999999;
	width: auto;
	clear:right;
	position: absolute;
	top:5px;
	height:100%;
	left:120px;
	float:left;
	display:inline;
	padding:5px 10px 10px 10px;;
}

TOP CHILD:

#cFrame {
	background-color:white;
	border: 2px solid #999;
	padding: 5px;
	clear: left;
	height: auto;
	position:static;
	overflow: auto;
}

BOTTOM CHILD:

#subContent {
	clear:left;
	padding: 5px;
	height: 220px;
	position:static;
	border: 2px solid #999;
}

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 32 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

DIV size issues in IE

Maybe this will help

http://www.svendtofte.com/code/max_width_in_ie/

Regards
Day

The only way to learn is to do it yourself

werkkrew
Offline
newbie
Last seen: 17 years 16 weeks ago
Joined: 2004-03-02
Posts: 6
Points: 0

DIV size issues in IE

The width isnt the issue.

Basically, I want to take a page with as little or as much content as it has, always fit exactly to the screen. No larger, no smaller.

I tried an iframe, but I decided to use a div with overflow:auto instead.

Now, if theres no content in that div, the page is small, if theres a lot, its too big. I cant really use max-height, min-height because first of all they dont work in IE, and second, i want it to fit to any screen res, not just some number I set...

Ill play with it.

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 1 week ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

DIV size issues in IE

Not sure if this is entierly what you want but look at

http://www.alistapart.com/articles/footers/

Incedentaly you can get IE uses height in the same way that min-height works in Mozilla browsers, the trick is to use both but hide the heights from non IE browsers.

for example

#box
{
min-height: 200px;
}

* html #box
{
height: 200px
}

Ie will ignore the min-height and other browsers will ignore the * html selector.

I've used this and have so far not found any issues but maybe others have some thoughts as to the metirs of this method?

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 10 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

DIV size issues in IE

Doesn't seem to work in Safari though Sad (which does surpise me).

The next sentence is true. The previous sentence is false. Discuss...

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 1 week ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

DIV size issues in IE

Does it break badly?

werkkrew
Offline
newbie
Last seen: 17 years 16 weeks ago
Joined: 2004-03-02
Posts: 6
Points: 0

DIV size issues in IE

Well, I found some java that forces min height and max height to work, but im still finding it difficult to acheve what I want.

Basically, if you look at the index6 link above, I want the white box to force the page to fill the entire screen, but never let any part of the site extend beyond the window, and automatically resize perfectly...unless the window gets really small, then I dont care...

Im trying to work on a file manager interface, so I want it to be able to work well on any standard screen resolution.

The biggest problem i am finding is that my child elements when sized to 100% in either direction (height, width) it doesnt see 100% in reference to the container div, but 100% in proportion to the size of the window...

I can make the page work perfectly in mozilla, go figure.