CODEWITHSUNDEEP
csslayoutfixed
keruilin
keruilin

Reputation: 17512

How to create fixed header layout

Having some issues trying to create a fixed header layout for this jsfiddle:

http://jsfiddle.net/4xk4D/107/

Basically, I'd like the id element app-header-container to be fixed on the page.

I used this article as a reference but no luck yet!

NOTE: I am using SCSS in the jsfiddle.

Upvotes: 2

Views: 1377

Answers (3)

Scott
Scott

Reputation: 21882

#app-header-wrapper {
width: 1024px;
margin: 10px auto;  
background-color: pink;

#app-header-container {
#app-access {
  background-color: green;
}
#app-header {
  height: 93px;
  background-color: blue;
} 
#app-main-nav {
  background-color: pink;
}
}
}

You can not nest CSS that way. Much of the CSS is being ignored due to how you've got it nested and sub nested between brackets. Markup shoul dbe selector { property } or selector, selector, selector { property }

Upvotes: 0

Zul
Zul

Reputation: 3608

Trying to modify your css:

#app-header-wrapper 
{
  width: 1024px;
  margin: 10px auto;  
  background-color: pink;      
}

#app-header-container 
{    

}

#app-main-nav 
{
    background-color: pink;
}

#app-header 
{
    height: 93px;
    background-color: blue;
}

#app-access 
{
    background-color: green;
}

#app-content-container 
{
    width: 1024px;
    margin: 10px auto;
    background-color: red;
}

#app-content 
{
    float: left;
    width: 739px;
    background-color: yellow;
}

#app-sidebar 
{
    float: right;
    width: 275px;
    background-color: orange;
}

#app-footer 
{
    margin: 0 auto;
    width: 1024px;
    height: 50px;
    background-color: pink;
}

.clearfix:after
{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

Or just try using css grid for layouting. One of them http://1kbgrid.com/

Upvotes: 0

ceth
ceth

Reputation: 45295

#header {
    top:0;
    width:100%;
    position:fixed;
    background-color:#FFF;
}

#content {
    position:static;
    margin-top:100px;
}

Upvotes: 3

Related Questions