overflow in div help needed [Archive]

Darkmatter5

11-26-2008, 05:40 PM

my CSS

#wrap {
min-height: 99%;
width: 90%;
position: absolute;
left: 50%;
margin-left: -45%; /*negative of half the width*/
border: 1px solid black;
/*background-color: blue;*/
z-index: 1;
}
#header {
height: 60px;
border-bottom: 2px solid black;
background: url(../images/hdr-bkg.png) repeat-x;
/*background-color: fuchsia;*/
z-index: 2;
}
#content {
min-height: 87%;
max-height: 87%;
width: 80%;
position: absolute;
margin: 0;
/*background-color: aqua;*/
z-index: 2;
}
#tools {
min-height: 87%;
width: 20%;
position: absolute;
margin: 0;
/*background-color: red;*/
right: 0;
z-index: 2;
}
#footer {
height: 5%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
/*background-color: green;*/
z-index: 2;
}
#tools_login {
height: 120px;
width: 100%;
border-left: 1px solid black;
border-bottom: 1px solid black;
z-index: 3;
}
#c_menu {
height: 3%;
min-width: 100%;
z-index: 3;
}
#c_content {
height: 97%;
min-width: 100%;
overflow: auto;
z-index: 3;
}

Here's my PHP

<?php
require('library/config.inc.php');
require('library/ecabinet_funcs.php');
$ec=new ecabinet();
$page_title="E-Cabinet Main Page";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $page_title; ?></title>
<link href="library/config.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="header">header</div>
<div id="content">
<div id="c_menu">c_menu</div>
<div id="c_content">c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
c_content<br>c_content<br>c_content<br>c_content<br>c_content<br>
</div>
</div>
<div id="tools">
<div id="tools_login" align="center">tools_login</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

The content in "c_content" overflows passed the div edge and the scrollbar shows up at the level of the browser not the c_content div. What's going on?

BoldUlysses

12-09-2008, 04:51 PM

Gutted your CSS:

#wrap {
width: 90%;
position: relative;
left: 50%;
margin-left: -45%; /*negative of half the width*/
border: 1px solid black;
/*background-color: blue;*/
}
#header {
height: 60px;
border-bottom: 2px solid black;
background: url(../images/hdr-bkg.png) repeat-x;
/*background-color: fuchsia;*/
}
#content {
width: 80%;
margin: 0;
/*background-color: aqua;*/
}
#tools {
width: 20%;
margin: 0;
/*background-color: red;*/
z-index: 2;
position:absolute;
top:60px;
right:0px;
}
#footer {
clear:both;
}

#tools_login {
height: 120px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}

A few things:

- z-index only applies to absolutely-positioned elements.
- Don't use min- and max-widths and heights if you can help it--their cross-browser support is spotty (IE6 in particular has problems with them)
- Divs expand to fill 100% of their parent's width by default, so you don't need width:100% all over the place.