VPF::float:left и background-repeat не уживаются

mark2011

Дата 10.5.2013, 21:52 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 28.6.2011

Репутация: нет
Всего: 2

Друзья, всем добрый вечер!

Сразу к делу. К примеру есть такой блок:

Код


  <div class="content">
               <div class="content_header">
                   <div class="left_photo">
                       
                   </div>
                   <div class="right_photo">
                       
                   </div>
               </div>
           </div>

и у этого блока есть css:

Код


.content
{
    width: 1032px;
    min-height: 215px;
    height: auto;
    background-color: #fff;
    background-repeat: repeat-y;
    margin: 20px auto;
    position: relative;
}

.content_header
{
    padding: 20px 0 0 10px;
}

.left_photo
{
    width: 700px;
    height: 369px;
    background-image: url('../images/slider_image.png');
    display: block;
    float: left;
}

.right_photo
{
    width: 222px;
    height: 260px;
    background-image: url('../images/towels.jpg');
}

Тот факт, что у .left_photo указано float: left заставляет перестать работать правило background-repeat: repeat-y у контента. Хотя всё указано. Если не делаю float: left то всё отлично. А это правило мне нужно для того, чтобы две фотки встали рядом одна к другой.

Кто в теме плиз, расскажите, как обойти или как исправить? Доктайп у страницы:

Код


<!DOCTYPE html>

Всем спасибо smile

Arantir

Дата 11.5.2013, 14:41 (ссылка)

(нет голосов)

Загрузка ...

Рыбак без удочки

Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55

Во-первых, какой еще background-repeat, если у него нету никакого background?
Во-вторых,

Цитата(mark2011 @ 10.5.2013, 20:52

)

Тот факт, что у .left_photo указано float: left заставляет перестать работать правило background-repeat: repeat-y у контента.

чего, а таких замутов не бывает точно.
Свойство прекрасно работает в описанной ситуации. Вот http://jsfiddle.net/kqWd4/3/

Цитата(mark2011 @ 10.5.2013, 20:52

)

А это правило мне нужно для того, чтобы две фотки встали рядом одна к другой.

float используется для обтекания текстом.
Используйте display: inline-block и блоки не будут иметь после себя переноса строки, а будут складываться горизонтально.

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »