Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    overflow in div help needed

    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?

  • #2
    New Coder
    Join Date
    May 2008
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No ideas?? Please help! I know this shouldn't be too difficult, but I can't figure it out.

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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.
    matt | design | blog


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •