Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > float:left и background-repeat не уживаются

Автор: mark2011 10.5.2013, 21:52

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

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

Код


  <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

Во-первых, какой еще 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 и блоки не будут иметь после себя переноса строки, а будут складываться горизонтально.