homepage Welcome to WebmasterWorld Guest from 50.17.79.35
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Making DIV expand to fill height & width
having trouble making CSS for XHTML
akoepke




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

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]

 

Nick_W




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

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

akoepke




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

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]

Nick_W




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

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

akoepke




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

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.

Nick_W




msg:1180427
 4:45 pm on Feb 20, 2003 (gmt 0)

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

akoepke




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

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.

Nick_W




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

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]

bluecorr




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

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.

akoepke




msg:1180431
 6:02 pm on Feb 20, 2003 (gmt 0)

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.

Nick_W




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

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

akoepke




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

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

SethCall




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

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)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved