Center Div Not Filling Height

R

rowe_newsgroups

Hello all, I have something I believe is something simple, but I can't
seem to figure out what to do. I did some searching, but I either
can't get my search right.

Anyways, on a new webpage I'm creating (I'm not a designer by any
means) I want to have a Div in the center that hoses all the pages
content. I want the div to fill the entire height of the browser so I
set the css height to 100%, but when another object is downscreen, the
center div no longer fills the browser. Any suggestions on how to get
the center div to fill the height in this situation?

Here's some markup that will demonstrate the problem:

/////////////////////////////////////////

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>My Problem Page</title>
<style type="text/css">
body {
background-color: Black;
}

#centerDiv {
background-color: White;
position: absolute;
top: 0px;
left: 20%;
width: 60%;
height: 100%;
}

#problemDiv {
background-color: Red;
position: absolute;
top: 2000px;
left: 50%;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="centerDiv">
<div id="problemDiv">

</div>
</div>
</form>
</body>
</html>

///////////////////////////////////////

Thanks in advance for all your help!

Thanks,

Seth Rowe
 
R

rowe_newsgroups

Hello all, I have something I believe is something simple, but I can't
seem to figure out what to do. I did some searching, but I either
can't get my search right.

Anyways, on a new webpage I'm creating (I'm not a designer by any
means) I want to have a Div in the center that hoses all the pages
content. I want the div to fill the entire height of the browser so I
set the css height to 100%, but when another object is downscreen, the
center div no longer fills the browser. Any suggestions on how to get
the center div to fill the height in this situation?

Here's some markup that will demonstrate the problem:

/////////////////////////////////////////

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>My Problem Page</title>
<style type="text/css">
body {
background-color: Black;
}

#centerDiv {
background-color: White;
position: absolute;
top: 0px;
left: 20%;
width: 60%;
height: 100%;
}

#problemDiv {
background-color: Red;
position: absolute;
top: 2000px;
left: 50%;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="centerDiv">
<div id="problemDiv">

</div>
</div>
</form>
</body>
</html>

///////////////////////////////////////

Thanks in advance for all your help!

Thanks,

Seth Rowe

Instead of using a div to draw the content region, I've opted to just
draw the white background onto the page background and then center the
image. I'm still curious as to how to have the div fill, but at least
I have something working now.

Thanks,

Seth Rowe
 
B

bruce barker

its because you are using xhtml instead of ie quirks mode. in xhtml the
page does not have a height by default, so setting the div to 100% has
no effect. the div needs a parent with an absolute height. you can use
javascript to set the height.


-- bruce (sqlwork.com)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top