центр контейнер в среде с эластичным фоном

Question

Пожалуйста, можете проверить это example website. если я хорошо прочитал код (просто был прицел), он настраивается с таблицами с некоторым javascript, так что центрированный контейнер всегда может оставаться в центре и что у тела есть два флюидных цветных фона, которые расширяются в соответствии с размером экрана.

Я пытался воспроизвести что-то подобное, но просто используя css, я вполне уверен, что могу, но не могу понять, как это сделать. пожалуйста, не могли бы вы дать мне указание/документ для чтения.

Answer 1

Вы просто запрашиваете горизонтальное центрирование на контейнере с фиксированной шириной. Это легко сделать полностью в CSS. Просто установите для вашего контейнера (элемент, который оборачивается вокруг всего сайта):

.container { 
    width: 800px; 
    margin: 0 auto; 
} 

«авто» будет автоматически выравниваться левый и правый края (без края сверху и снизу.)

[Редактировать: oops забыл немного]

Что касается блоков цвета, вы можете достичь этого с фоновым изображением на вашем элементе, это 1px широкий и сколько вам нужно. Просто установите его для повторения-x.

Если две секции имеют возможность иметь разную высоту, вы можете разбить его, так что:

1. Один контейнер по всей ширине, и имеет цвет фона. Внутренний контейнер затем будет фиксированной шириной с автоматическими полями, как указано выше;
2. Другой контейнер имеет полную ширину и имеет более светлый цвет фона. Внутренний контейнер затем будет фиксированной шириной с автоматическими полями, как указано выше.

Это означает, что ваш код будет что-то вроде:

<div class="headercontainer"> 
    <div class="header> This is my header </div> 
</div> 
<div class="maincontainer"> 
    <div class="main"> This is rest of my copy. </div> 
</div> 

И ваш CSS:

.headercontainer { background-color: #222; } 
.maincontainer { background-color: #444; } 
.headercontainer .header, 
.maincontainer .main { width: 800px; 
    margin: 0 auto; } 

НТН :)

Answer 2

i have designed a simple structure here in Jsfiddle,have a look

MARK-UP ::

<div class="wrapper"> 
    <div class="head_wrapper"> 
     <div class="left_head">left</div> 
     <div class="right_head">right</div> 
    </div> 
<div class="body_wrapper"> 
     <div class="left_body">left</div> 
     <div class="right_body">right</div> 
</div> 
</div> 

CSS ::

.wrapper{ 
overflow:hidden; 
width:100%; 
display:table; 
} 
.head_wrapper,.body_wrapper{ 
overflow:hidden; 
width:100%; 
padding:0px; 
display:table-row; 
} 
.left_head,.left_body,.right_head,.right_body{ 
display:table-cell; 
text-align:center; 
vertical-align:middle; 
} 
.left_head{ 
background:black; 
height:300px; 
font-size:36px; 
color:white; 
} 
.right_head{ 
background:blue; 
height:300px; 
font-size:36px; 
} 
.left_body{ 
background:yellow; 
height:800px; 
font-size:36px; 
} 
.right_body{ 
background:green; 
height:800px; 
font-size:36px; 
} 
.left_head,.left_body{ 
width:70%; 
overflow:hidden; 
}