Center Div Not Filling Height

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

rowe_newsgroups - 20 Jun 2007 02:22 GMT

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

Reply to this Message

rowe_newsgroups - 20 Jun 2007 11:33 GMT

> 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
[quoted text clipped - 60 lines]
>
> 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

Reply to this Message

bruce barker - 20 Jun 2007 17:13 GMT

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)

> 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
[quoted text clipped - 61 lines]
>
> Seth Rowe

Reply to this Message

Center Div Not Filling Height

Free Magazines