Grow your CSS skills. Land your dream job.

div overflow

  • # August 6, 2012 at 12:01 am

    I’ve been experiencing some issues with overflowing data kept inside a div. I’ve been playing around with some re-design of a website I maintain, and when this page is viewed on a computer other than mine own the tabled menu list in the left navigation panel overflows onto the main content of the page. I also have this issue with the blog archives tree menu (which comes from this code), where on browsers other than Firefox the blog titles of the menu run over the div.

    I’ve tried playing around with the overflow attribute as well as the word-wrap attribute, but nothing seems to stop these from overflowing and staying within their supposed bounds.

    I’m relatively new at this and so any help would be appreciated. I’m sure I’m missing some knowledge (and obviously expertise) here.

    The pertinent code, from the style sheet, are as follows.


    #wrapper {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -12px;
    position: relative;
    }

    #banner {
    width: 93%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -13px;
    padding-top: 20px;
    padding-left: 85px;
    background: #848484;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-top-right-radius: 55px;
    -webkit-border-bottom-right-radius: 55px;
    -moz-border-radius-topright: 55px;
    -moz-border-radius-bottomright: 55px;
    -moz-border-radius-topleft: 100px;
    -khtml-border-radius-topleft: 100px;
    -khtml-border-radius-topright: 55px;
    -khtml-border-radius-bottomright: 55px;
    border-radius: 0 0 65px 65px;
    }
    #leftNav {
    width: 15%;
    padding: 12px;
    margin-left: -99%;
    background: #848484;
    -webkit-border-bottom-left-radius: 55px;
    -moz-border-radius-bottomleft: 55px;
    -khtml-border-radius-bottomleft: 55px;
    border-radius: 0 0 55px 55px;
    float: left;
    z-index: 15px;
    }
    #content {
    padding: 10px;
    background: #A3A3A3;
    -webkit-border-top-right-radius: 45px;
    -webkit-border-bottom-right-radius: 45px;
    -webkit-border-bottom-left-radius: 45px;
    -moz-border-radius-topright: 45px;
    -moz-border-radius-bottomright: 45px;
    -moz-border-radius-bottomleft: 45px;
    -khtml-border-radius-topright: 45px;
    -khtml-border-radius-bottomright: 45px;
    -khtml-border-radius-bottomleft: 45px;
    border-radius: 0 0 45px 45px;
    margin-left: 18%;
    padding-right: 2%;
    width: 62%;
    float: left;
    z-index: 10px;
    }
    #rightNav {
    width: 12%;
    margin-right: 2%;
    padding: 8px;
    background: #A3A3A3;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 0 0 45px 0;
    padding-left: 2%;
    float: left;
    z-index: 20px;

    }
    #legal {
    clear: both;
    text-align: center;
    }
    #end {
    background: #848484;
    margin-left: 18%;
    margin-right: 17%;
    -webkit-border-top-left-radius: 45px;
    -webkit-border-top-right-radius: 45px;
    -moz-border-radius-topleft: 45px;
    -moz-border-radius-topright: 45px;
    -khtml-border-radius-topleft: 45px;
    -khtml-border-radius-topright: 45px;
    border-radius: 45px 45px 0 0;
    font: 10px Tahoma;
    color: #F7F7F7;
    text-align: center;
    }

    Any and all critique will be helpful, but the main thing I’m after is how to keep the data within its div parameters.

    Thanks.

    # August 6, 2012 at 9:57 am

    I solved the issue with the left menu overflowing by adding

    style='table-layout:fixed'

    to the table information.

    However, the blog archives is not a table so unfortunately wasn’t such a quick fix – it’s still not working in Safari.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".