2013-03-27 2 views
1

Я сражаюсь в настоящее время с центрированной оберткой (с центром с автографом 0). теперь я хочу, чтобы контейнер начинался слева до начала центрированной обертки. Возможно ли это вообще с этой заданной маржей?Есть ли способ, которым я могу покрыть маржу слева, несмотря на крайность: 0 auto с CSS?

Я бы очень признателен за некоторые подсказки!

Смотри также скрипку: http://jsfiddle.net/TQhEa/1/

Что я есть сейчас: enter image description here

То, что я хочу иметь:

enter image description here

Мой код:

<body> 
    <div id="page-wrapper"> 
     <p><---- how can i cover the left side only with red without javascript but keeping the "0 auto margin?" 

    </div> 
</body> 

мой CSS:

body, html{ 
     width:100%; 
     height:100%; 
     top:0; 
     margin:0; 
     background-image: url('http://www.art-wallpaper.net/Full-Size-HD-Wallpaper29/images/HD%20Widescreen%20Wallpaper%2059.jpg'); 
     background-repeat:no-repeat; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 

} 
#page-wrapper{ 
    background-color:red; 
    margin: 0 auto; 
    width: 400px; 
    top:0; 
    margin-top:0; 
    height:100%; 
} 
p { 
    padding:0; 
    margin:0; 
    font-size:30px; 
} 
} 
+1

Вы можете поместить второй бокс на 50% влево. – gaynorvader

ответ

1

Самый простой способ будет установите background-color и положение background-image. Проверьте this piece of code: HTML

<div id="page-wrapper">content</div> 

CSS

body { 
    margin: 0; 
    background: #c11 url(http://placekitten.com/1000/1000) 100% 0 no-repeat; 
} 
#page-wrapper { 
    width: 400px; 
    height: 1000px; 
    background: #ccc; 
    margin: 0 auto; 
} 
+0

это действительно интересный подход ... знаете ли вы, если это так, то есть 7-10? – Jurudocs

+0

Должно. Здесь ничего нет, IE не поймет. ;) –

+0

всего лишь небольшая заметка: при изменении размера окна фон не настраивается ... – Jurudocs

1

Добавить еще 1 DIV со следующими CSS:

#left_div { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 50%; 
    height: 100%; 
    background-color: #F00; 
    display: table; /* note IE5-7 does not support this */ 
    z-index: 1; 
} 

и изменить текущий центрированный DIV $('#page-wrapper') иметь более высокую z-index значение,

Смежные вопросы