Как создать фиксированный макет заголовка

Question

Возникли некоторые проблемы при попытке создать фиксированный макет заголовка для этого jsfiddle:

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

В принципе, я бы хотел, чтобы app-header-container элемента id был зафиксирован настраницы.

Я использовал эту статью в качестве ссылки, но пока не повезло!

ПРИМЕЧАНИЕ. Я использую SCSS в jsfiddle.

Answer 1

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

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

Answer 2

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

Вы не можете таким образом вкладывать CSS.Большая часть CSS игнорируется из-за того, что вы вложили его в скобки.Разметка для селектора {свойство} или селектор, селектор, селектор {свойство}

Answer 3

Попытка изменить свой 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;
}

Или просто попробуйте использовать сетку CSS для макета.Один из них http://1kbgrid.com/