Center Div Not Filling Height

  • Thread starter Thread starter rowe_newsgroups
  • Start date Start date
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
 
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
Click to expand...

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
 
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)
 
Back
Top