overflow in div help needed

Darkmatter5 · 11-26-2008, 05:40 PM

my CSS

Code:

#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

Code:

<?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?

Darkmatter5 · 12-09-2008, 04:29 PM

No ideas?? Please help! I know this shouldn't be too difficult, but I can't figure it out.

BoldUlysses · 12-09-2008, 04:51 PM

Gutted your CSS:

Code:

#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.