позиционирование Div-х

Question

В настоящее время я работаю с http://jsfiddle.net/ngZdg/

В конечном счете, я пытаюсь получить параллакс сайта идет, но я борюсь с начальными вопросами компоновки. Я пытаюсь получить следующую схему:

------------------------------------- 
|         | 
|         | 
|   ______ ______   | 
|   |  |  |   | 
|   |  |  |   | 
|   ______ ______   | 
|     |  |   | 
|     |  |   | 
|     ______   | 
|         | 
------------------------------------- 

Любые предложения?

Answer 1

попробовать this:

@charset"utf-8"; 
#main { 
    background-color:pink; 
    width:1280px; 
    height:100%; 
    position:absolute; 
} 
#chapter1 { 
    background: blue; 
    width:90%; 
    height:90%; 
} 
#chapter1_1 { 
    background-color:red; 
    width:100px; 
    height:100px; 
    left:100px; 
    top:50px; 
    position:absolute;  
} 
#chapter1_2 { 
    background-color:yellow; 
    width:100px; 
    height:100px; 
    left:205px; 
    top:50px; 
    position:absolute; 
} 
#chapter1_3 { 
    background-color:green; 
    width:100px; 
    height:100px; 
    top:155px; 
    left:205px; 
    position: absolute; 
} 

Кроме того, необходимо закрыть <DIV> теги.

<div class="whatever" /> 

не является правильным, оно должно быть

<div class="whatever"></div> 

Answer 2

, как вы закрыли див не закрывая их в скрипке. Это создает что-то похожее на вашу диаграмму.

<div id="main"> 
    <div id="chapter1"> 
     <div id="chapter1_1"></div> 
     <div id="chapter1_2"></div> 
     <div id="chapter1_3"></div> 
    </div> 
</div> 

CSS:

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#main { 
    background-color:#00FF00; 
    width:100%; 
    height:100%; 
    /*position:absolute; 
    left:50%; 
    margin-left:-640px;*/ 
} 
#chapter1 { 
    background: blue; 
    height:100%; 
    position:relative; 
    width:100% 
} 
#chapter1_1, 
#chapter1_2, 
#chapter1_3 { 
    height:20%; 
    width:20%; 
    position:absolute; 
} 
#chapter1_1 { 
    background-color:red; 
    top:10%; 
    left:30%;  
} 
#chapter1_2 { 
    background-color:yellow; 
    left:50%; 
    top:10%; 
} 
#chapter1_3 { 
    background-color:green; 
    top:30%; 
    left:50%; 
} 

Answer 3

Я обновил скрипку, на фоне абсолютной и другие DIV относительны в позиционировании

Please refer link http://jsfiddle.net/MarmeeK/ngZdg/19/ 

СМЧ, как это

@charset"utf-8"; 
#main { 
    background:pink; 
    width:1280px; 
    height:900px; 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    margin:0; 
    padding:0; 
} 
#chapter1 { 
    margin:100px auto 100px auto; 
    background: blue; 
    height:500px; 
    width:800px; 
    padding:100px; 
} 
#chapter1_1, #chapter1_2, #chapter1_3 { 
    width:200px; 
    height:200px; 
    position:relative; 
    display:block; 
    margin:0; 
    padding:0; 
    float:left; 
} 
#chapter1_1 { 
    background-color:red; 
    left:100px; 
} 
#chapter1_2 { 
    background-color:yellow; 
    left:100px; 
} 
#chapter1_3 { 
    clear:both;// to clear the float to next line. 
    background-color:green; 
    left:300px; 
} 

Я уверен, что это будет делать. :)