Welcome to WebmasterWorld Guest from 54.205.115.177

Forum Moderators: not2easy

Message Too Old, No Replies

Making DIV expand to fill height & width

having trouble making CSS for XHTML

   
3:31 pm on Feb 20, 2003 (gmt 0)

10+ Year Member



Hey hows it going?

I am working on a site before and decided to setup into the XHTML & CSS2 world and ditch tables. I have got the whole site looking good and validating perfectly. The only problem I have is with the content area. I need this content area to scale in height and width and remain a constant pixel amount from the edges of the browser.

I tried the following code and it worked with Netscape & Mozilla but not in IE


.frame {
position: absolute;
left: 150px;
top: 130px;
right: 300px;
bottom: 66px;
}

Thanks for your help :)

Andreas

[edited by: Nick_W at 3:35 pm (utc) on Feb. 20, 2003]

3:42 pm on Feb 20, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi, Welcome to WebmasterWorld! [webmasterworld.com]

Are there other elements in the spaces not covered by that div or is it just white space?

Nick

3:50 pm on Feb 20, 2003 (gmt 0)

10+ Year Member



The area around the div will be whitespace except for the part on the right and so needs to be kept clear. Generally the content div needs to fill the centre area with a margin around it.

[edited by: Nick_W at 3:53 pm (utc) on Feb. 20, 2003]

3:59 pm on Feb 20, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Please check your sticky mail (top of screen) ;)

One way I might try this would be to put those values as paddings on the body.

[pre]
body {
padding: 130px 300px 66px 130px;
margin: 0;
}[/pre]

Then you could just absolutely position the right hand element within the space created by the padding.

I'm sure there are other ways, but that's where I'd start...

Nick

4:38 pm on Feb 20, 2003 (gmt 0)

10+ Year Member



I tried the padding but Mozilla seems to ignore it. In IE it causes the page to fill half the browser width but the other paddings are ignored.
4:45 pm on Feb 20, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Works fine for me, of course you need to add some content for it to stretch down to it's bottom limit. Here's what I just tested on Moz:
[pre]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Padding Test</title>
<style= type="text/css">
body {
padding: 130px 300px 66px 130px;
margin: 0;
}
#testdiv {
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="testdiv">
<p>Some knarly old content here...</p>
</div>
</body>
</html>[/pre]

Try it...

Nick

5:18 pm on Feb 20, 2003 (gmt 0)

10+ Year Member



I tried that and it worked in IE, we had a box the right size. I copied the code into my XHTML file and it caused the other div tags to shrink to half their size. In Mozilla it doesnt expand to fill the area it has available.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>
<title>Padding Test</title>
<style type="text/css">
body {
padding: 130px 300px 66px 130px;
margin: 0;
}
#testdiv {
border: 1px solid #000000;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="testdiv">
<p>Some knarly old content here...</p>
</div>
</body>
</html>

Works as desired in IE but no Mozilla.

5:35 pm on Feb 20, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Well if you have other divs with other rules in your sheet then you'll just have to fiddle with it and try to work out whats happening.

The code gives a demonstration of the principle, not a solution to a unique problem.

Take a trawl through the threads here and you'll pick up lots of good newbie resources nad specific discussions.

Good luck!

Nick

edited for speeling

[edited by: Nick_W at 6:01 pm (utc) on Feb. 20, 2003]

5:58 pm on Feb 20, 2003 (gmt 0)

10+ Year Member



margin-top, margin-bottom and so on could also work. I might be wrong but top, left, right, bottom work when you're using #frame (meaning id=frame), when using .frame (class=frame) the above mentioned is used.
6:02 pm on Feb 20, 2003 (gmt 0)

10+ Year Member



Okay what i have done now is used the padding on a div


.frame {
position: fixed;
padding: 130px 200px 66px 150px;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
z-index: 0;
}

Then I used the following XHTML


<div class="frame">
<iframe src="blank.htm" frameborder="0" height="100%" width="100%"></iframe>
</div>

Now this works perfect in IE. In Mozilla the iframe pushes out the DIV tag and the iframe takes on the whole browser window size and goes off the screen. I keep getting it to work in one browser but not the other.

6:04 pm on Feb 20, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Ohhhhhhhh! - I thought the #frames was just a name, I didn't get that you were using frames!

I'll let the frame experts take this one, I hate 'em personally ;)

Nick

6:08 pm on Feb 20, 2003 (gmt 0)

10+ Year Member



Originally I was using a div with the overflow setting set to scroll but the scroll bars were always there and it looked ugly. Hence why I have switched to using the Iframe tag. I personally dont like them that much but the client doesnt want the scroll bars there 24x7

Okay the first bit of code I posted works on NN, the last chunk of codeI posted works perfectly on IE. I know how to program for each browser... but not for both

6:47 pm on Feb 20, 2003 (gmt 0)

10+ Year Member



well. maybe there is an alternative

overflow:auto

puts scroll bars on when the content demands it, but not 24/7 (i.e., when the content doesn't demand it)