Can't Organize Div's Properly


#1



https://www.codecademy.com/en/courses/web-beginner-en-9x6JW-WnAFv/0/6?curriculum_id=50579fb998b470000202dc8b


I'm not getting any error messages but nothing is lining up correctly. The header, left, right and footer divs have basically overlapped. I've followed everything to a T and rechecked it. What's wrong :frowning:


div {
    border-radius: 5px;
}

#header {
    border: 2px black solid;
    height: 50px;
    width: 100%;
    background-color: #BA730F;
    position: fixed;
    z-index: 1;
}

.left {
    border: 2px black solid;
    height: 30px;
    width: 50px;
    background-color: #0C105C;
    float: left;
}

.right {
    border: 2px black solid;
    height: 30px;
    width: 50px;
    background-color: #0C105C;
    float: right;
}

#footer {
    border: 2px black solid;
    height: 50px;
    width: 100%;
    background-color: #BA730F;
    clear: both;
}


#2

Please post your HTML code.

Thank you! :smile:


#3

your fixed header is "ignored", the left and right will just go behind it, instead of following the normal flow (which would have been below it)

You can simple push them down as i did here. I also added box-sizing, this makes border part of the width and height of an element, instead of expanding it (a 50px by 50px div with 2px is 54px by 54px without box-sizing: border-box, with border-box it is 50px by 50px)


#4

Thank you very much! The border-box is a nice tip!

So will a fixed header always result in other divs hiding behind it? Is the lesson in this error to ALWAYS or almost always put a margin around everything?

Cheers! :smile:


#5

normally, if you put divs they will sit below each other, but position: fixed breaks this pattern. You did see the margin i added to .left and .right?

Also, you could remove body's margin:

body { margin: 0 }

another good tip. Either way, are you pleased with the output now?