CODEWITHSUNDEEP
csshtmloverflowoverlap
Robbenu
Robbenu

Reputation: 413

HTML/CSS div which overlaps parent div

So, I've built multiple sites and could always fix this problem, one way or another. But this time I got stuck.

I have a wrapper div, within this div I have two div's. When the inner div exceeds the length of the wrapper div, it just overlaps it. My goal is that the wrapper div gets the same height, as the inner div.

Here is the code I use:

<body>
    <!-- Begin of site -->
    <div id="wrapper">
        <!-- Site Wrapper -->
        <div id="site-wrapper">
            <!-- Header -->
            <div id="header"></div>
            <!-- end Header -->
            <!-- Column positioner -->
            <div id="colpos">
                <!-- Column Left -->
                <div id="columnLeft">
                    <div id="mainWrap">
                        <div id="contentBar"></div>
                        <div id="main">
                            Content 
                            <div id="longDiv">Very long</div>
                        </div>
                    </div>
                </div>
                <!-- Column Right -->
                <div id="columnRight">
                    <div id="links">
                        <div id="navBar"></div>
                        Links
                    </div>
                </div>              
            </div>
            <!-- einde Column positioner -->

            <div id="footer">Copyright</div>
        </div>
        <!-- end Site Wrapper -->
    </div>
    <!-- end  site -->
</body>

And the corresponding CSS:

    /*==============================
    SITE RESETS
===============================*/
html {
    margin: 0px;
    padding: 0px;
    font-family: Calibri, arial;
}

body{
    margin: 0px;
    padding: 0px 0px 50px 0px;
    border: 0px;
    background: url('img/background.png');
}


a img { border:none; }

#longDiv{
    height: 2000px;
    color: white;
    background-color: black;
}

/*==============================
    SITE WRAPPER
===============================*/
#wrapper{
    width: 1200px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#site-wrapper{
    width: 970px;
    margin: 0px 0px 30px; 
    padding: 0px;
    border: 0px;
    position: relative;
    background-color: #ebebeb;
    left: 115px;
    top: 30px;
}

#header{
    clear: both;
    min-width: 970px;
    width: 100%;
    height: 190px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: #fff url('img/header.png');
    background-repeat: repeat-x;
    position: relative;
    top: 30px;
}

#colpos{
    clear: both;
    float: left;
    height: 100%;
    min-height: 100px;
    width: 920px;
    padding: 50px 20px 20px 20px;
    margin: 0px;
    border: 0px;
}

#columnLeft
{
    float: left;
    width: 620px;
    height: 100%;
    min-height: inherit;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#columnRight
{
    float: right;
    width: 265px;
    height: 100%;
    min-height: inherit;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

/*==============================
    Content
===============================*/
#mainWrap{
    float: left;
    width: 100%;
    height: 100%;
    min-height: inherit;
    margin: 0px;
    padding: 0px;
    background: white;
    border: 1px solid #689e9f;
}

#contentBar{
    float: left;
    min-width: 620px;
    width: 100%;
    min-height: 23px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: #689e9f url('img/content.png');
    background-repeat: no-repeat;
}

#main{
    clear: both;
    height: 100%;
    min-height: inherit;
    float: left;
    margin: 5px 5px 5px 5px;
    max-width: 620px;
    height: inherit;
    font-family: Calibri, arial;

}

#links{
    float: left;
    width: 100%;
    min-height: 250px;
    margin: 0px;
    padding: 0px;
    background: white;
    border: 1px solid #689e9f;
}

#navBar{
    float: left;
    min-width: 265px;
    width: 100%;
    min-height: 23px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: #689e9f url('img/nav.png')  right;
    background-repeat: no-repeat;
}

#footer
{
    clear: both;
    margin: 10px 10px 10px 10px;
    width: 50%;
    position: relative;
    top: 0.5em;
    left: 25%;
    font-family: Calibri, arial;
    color: white;
    text-align: center;
    font-style: italic;
    background-color: #689e9f;
}

My problem in short: https://i.sstatic.net/bBW8g.jpg

I've posted as much of my code as possible, I hope one of you can point me the error I've been making. I'm usually not someone asking online for help, but this problem has been bugging me long enough.

Thanks in advance, EvilTuinhekjeNL

Upvotes: 1

Views: 2435

Answers (1)

JordinB
JordinB

Reputation: 306

By defining a height of 100% for the wrapper, you are limiting it to the height of the browser window. The very long div will extend this limitation because of its set height.

To fix this remove the height 100% from the wrapper and any other containers, If you want to limit limit the content to the size of the viewable document, you could set your divs to position: absolute and then set the top, left, right and bottom to the extremities of the screen.

Upvotes: 2

Related Questions