Why isnt my header staying still in a fixed position?


#1

header {

width:100%;
height:125px;
background-color: Grey;
border-radius: 10px;
margin: 5px 0px 5px 5px
position: fixed;
z-index: 1;

}

.left {
width:15%;
height:100%;
background-color: red;
border-radius: 5px;
float: left;

}

.right {
width: 83%;
height:100%;
background-color: blue;
border-radius: 5px;
float: right;

}

footer {

width:100%;
height:50px;
background-color: Grey;
border-radius: 10px;
margin-top: 5px; 
clear: both;

}

div {
display: inline-block;
}


#2

Your margin is missing a semi colon thus breaking the code


#3

Because you are missing a semi-colon after your margin value


#4

Thanks Guys I appreciate it!


#5

How do I get my left and right divs to start underneath my header. Right now they are both behind it.

#header {
    width:99%;
    height:125px;
    background-color: Grey;
    border-radius: 5px;
    position: fixed;
    z-index: 1;
    
    
    
}

.left {
    width:15%;
    height:100%;
    background-color: red;
    border-radius: 5px;
    float: left;
   
    
}

.right {
    width: 83%;
    height:100%;
    background-color: blue;
    border-radius: 5px;
    float: right;
    
    
}

#footer {
    width:100%;
    height:50px;
    background-color: Grey;
    border-radius: 5px;
    margin-top: 5px; 
    clear: both;
}

div {
 display: inline-block;   
}

.center {
    text-align: center;
    font-size: 26px;
    margin-bottom: -10px;
}

.small {
    text-align: center;
    font-size: 10px;   
}

#6

Have you tried given your left and right margin-top? I would choice the same value as the height of your header


#7

Yes I have they still stay behind. Would I use position in this situation?


#8

Nevermind it did work. Forgot a semi colon again. Lol


#9

That doesn't really help, i do have some sugestions, why do you have:

div { display: inline-block; }

not sure which purpose it serves, currently, this rule apply to all div, you might want to remove it, or make it more specific. Also, using percentage height (which i do not recommend), make sure all parents have a height as well (since a percentage height is: parent_height * (percentage / 100 ). body and html should have a height (make it 100%)

Yea, and don't forgot any semi-colons. I would remove body's default margin by overwriting it with body { margin: 0; }, and add div { box-sizing: border-box; } to make padding and border part of the width and height of a element, which makes life easier :slightly_smiling:


#10

Honestly I had that it there because I was trouble shooting. Im not really good at positioning yet. That is my weak point. I also want to switch my height and width to px but I do not know the px size of the page.


#11

Positioning is tricky to understand, you can also use height: auto; then the height will increase if you put more text and stuff in it