HTML div 标签相互重叠

Question

I have a problem with my div tags that my sidebar and content appears under my header when I resize window.

When the window is maximized

When the window is resized to a smaller size

Here is my CSS code:

    .header {
        height: 15%;
        width:100%;
        margin-bottom:0px;
        padding-bottom:0px;
    }

    .sidebar {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        height: 85%;
        float: left;
        width: 15%;
    }

    .content {
        float: right;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        height: 85%;
        width: 85%;
        text-align: center;
    }

I am also using a container to wrap the page content:

    .container {
        margin: 0px 0px 0px 0px;
        height: 100%;
        width: 100%;
    }

Answer 1

Put position: relative; on sidebar and content:

.sidebar {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        height: 85%;
        float: left;
        width: 15%;
        position: relative;
    }

.content {
    float: right;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    height: 85%;
    width: 85%;
    text-align: center;
    position: relative;
}

Answer 2

You shouldn't use float for making layouts, it's not ment to do that, and gets you into problems like this. Float is ment to place block-elements in a text like this:

you could simply fix this by using position: absolute;

 .header { position: absolute; top: 0; left: 0; height: 15%; width:100%; margin-bottom:0px; padding-bottom:0px; background: red; color: white; } .sidebar { position: absolute; left: 0; top: 15vh; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; height: 85vh; width: 15vw; background: orange; color: white; } .content { position: absolute; top: 15vh; left: 15vw; right: 0; bottom: 0; padding: 0; margin: 0; text-align: center; }

 <div class="header"> This is the header </div> <div class="sidebar"> This is the sidebar </div> <div class="content"> This is the content </div>