CODEWITHSUNDEEP
css
SebastianZdroana
SebastianZdroana

Reputation: 209

having issues with css element placement

enter image description here

The grey element, a div with id of #banner is not meant to be sticking out, I gave all the elements inside the div containing the welcome to fusion box, red element, and banner a min-height which adds up to all the min-heights of the elements inside it (welcome to fusion cube, red element, banner).

Basically it's not meant to stick out and I just can't figure out why it is sticking out.

JsFiddle

Not really something productive to ask but I can't figure it out and it's stressful 

#main-wrapper{
    width: 80%;
    height: calc(75.5% - 10px);
    margin: 10px auto 0;


    min-height: 250px;
}
    #page-title {
        height: 7%;
        font-size: 1.8em;
        text-align: center;
        padding: 1px 0 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        min-height: 35px;
    }
    #content-wrapper {
        background: red;
        height: 83%;

        min-height: 160px;
    }
        #page-messages {
            width: 100%;
            height: 20%;
            overflow: auto;
        }
    #banner {
        height: 10%;
        display: inline-block;
        background: grey;

    min-height: 55px;
}
footer {
    height: 8%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.5%;
    margin: 20px 0 0;
    width: 100%;
    display: block;
}

Upvotes: 0

Views: 32

Answers (1)

Johannes
Johannes

Reputation: 67758

you defined #banner as an inline-block - is that intention? (= not spanning the whole width?). Your fiddle looks quite different from the screenshot you posted...

try making its position: absolute and bottom: 0px;, and give the parent element (#main-wrapper) position: relative, and also a margin-bottom as high as #banner, which prevents content to be hidden by #banner.

(edited, wrong name for parent element)

Upvotes: 1

Related Questions