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.

Answers


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

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

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/


#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 }


Need Your Help

tecdoc WebService apache axis in .net client

.net web-services wsdl axis2 webservice-client

I am trying to use a Web Service generated on Apache Axis:

Multivalued hierarchal xml tag

python xml design

I have a piece of text with many classifications and I'm thinking of a perfect design for classification xml tag.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.