Не работает обтекание слева

223
10 марта 2018, 17:40

Почему не работает обтекание слева для class="sidebar"

/* Убираем отступы у списка */ 
 
ul { 
  padding: 0; 
  margin: 0; 
} 
 
ol { 
  padding: 0; 
  margin: 0; 
} 
 
.wrapper { 
  margin-right: auto; 
  margin-left: auto; 
  width: 960px; 
  height: 1271px; 
} 
 
.sidebar { 
  width: 330px; 
  height: 1271px; 
  float: left; 
} 
 
.sidebar_photo { 
  margin: 100px 0 0 0; 
  border-radius: 2px; 
} 
 
.sidebar_writers { 
  margin: 52px 0 30px 0; 
  font-size: 19px; 
  color: rgb(21, 169, 139); 
  font-family: "Georgia"; 
  list-style: none; 
} 
 
.sidebar_writers_item { 
  margin: 19px 0 0 20px; 
  font-size: 19px; 
  color: rgb(85, 85, 85); 
  font-family: "Georgia"; 
} 
 
.sidebar_films { 
  margin: 60px 0 24px 0; 
  font-size: 19px; 
  color: rgb(21, 169, 139); 
  font-family: "Georgia"; 
  list-style: none; 
} 
 
.sidebar_films_item { 
  margin: 19px 0 0 16px; 
  font-size: 19px; 
  color: rgb(85, 85, 85); 
  font-family: "Georgia"; 
} 
 
.content { 
  width: 630px; 
  height: 1271px; 
} 
 
.content_photo {} 
 
.content_quote {} 
 
.content_title {} 
 
.content_item {} 
 
.content_link {}
<div class="wrapper"> 
  <div class="sidebar"> 
    <img class="sidebar_photo" src="https://i.stack.imgur.com/40KxF.jpg" alt=""> 
    <h1 class="sidebar_writers">Любимые писатели</h1> 
    <ul> 
      <li class="sidebar_writers_item">Пабло Неруда</li> 
      <li class="sidebar_writers_item">Рубен Фонсека</li> 
      <li class="sidebar_writers_item">Исабель Аленде</li> 
      <li class="sidebar_writers_item">Симоне Бевуар</li> 
    </ul> 
    <h1 class="sidebar_films">Любимые фильмы</h1> 
    <ol> 
      <li class="sidebar_films_item">Чикаго (2002)</li> 
      <li class="sidebar_films_item">Дни жатвы (1978)</li> 
      <li class="sidebar_films_item">Бумажная луна (1973)</li> 
      <li class="sidebar_films_item">Сталкер (1979)</li> 
    </ol> 
    <div> 
      <!-- sidebar --> 
      <div class="content"> 
        <div class="content_photo"> 
          <!--<img src="images/hook.jpg" alt="">--> 
        </div> 
        <div> 
          <blockquote> 
            <p class="content_quote">"If you have a procedure with ten parameters, you probably missed some."</p> 
          </blockquote> 
        </div> 
        <h1 class="content_title">Jackie Chan</h1> 
        <p class="content_item">Люди считают меня оптимистичным, инициативным членом команды с отличными навыками общения. Последние несколько лет я занимаюсь подготовкой руководящих кадров, работаю в сфере телемаркетинга и обслуживания клиентов в разных отраслях промышленности. 
          Я обладаю опытом успешного назначения людей на должности уровня начальников технологических отделов и подготовки эффективных руководителей. В моем послужном списке – поддержание постоянного объема назначений и мероприятий. Кроме того, я постоянно 
          вхожу в первую десятку по объему продаж и мог бы делать то же самое для вашей компании</p> 
        <h3 class="content_title">Мои увлечения...</h3> 
        <p class="content_item">изучаю восточную культуру, языки; увлекаюсь оригами; занимаюсь художественным переводом книг; реставрирую старинные церкви и здания; выходные дни провожу на раскопках исторических поселений; уделяю время сбору мусора на пляжах, в лесах, лесопосадках; 
          благоустраиваю свой город; рисую мультипликационные фильмы; создаю развивающие книги для детей.</p> 
        <a class="content_link" href="URL">напиши мне</a> 
        <div> 
          <!-- content --> 
          <div> 
            <!-- wrapper -->

Answer 1

Таг sidebar не закрыт ...

ul { 
  padding: 0; 
  margin: 0; 
} 
 
ol { 
  padding: 0; 
  margin: 0; 
} 
 
.wrapper { 
  margin-right: auto; 
  margin-left: auto; 
  width: 960px; 
  height: 1271px; 
} 
 
.sidebar { 
  width: 330px; 
  height: 1271px; 
  float: left; 
  margin-right: 20px; 
} 
 
.sidebar_photo { 
  margin: 100px 0 0 0; 
  border-radius: 2px; 
} 
 
.sidebar_writers { 
  margin: 52px 0 30px 0; 
  font-size: 19px; 
  color: rgb(21, 169, 139); 
  font-family: "Georgia"; 
  list-style: none; 
}
<div class="wrapper"> 
  <div class="sidebar"> 
    <img class="sidebar_photo" src="https://i.stack.imgur.com/40KxF.jpg" alt=""> 
    <h1 class="sidebar_writers">Любимые писатели</h1> 
    <ul> 
      <li class="sidebar_writers_item">Пабло Неруда</li> 
      <li class="sidebar_writers_item">Рубен Фонсека</li> 
      <li class="sidebar_writers_item">Исабель Аленде</li> 
      <li class="sidebar_writers_item">Симоне Бевуар</li> 
    </ul> 
    <h1 class="sidebar_films">Любимые фильмы</h1> 
    <ol> 
      <li class="sidebar_films_item">Чикаго (2002)</li> 
      <li class="sidebar_films_item">Дни жатвы (1978)</li> 
      <li class="sidebar_films_item">Бумажная луна (1973)</li> 
      <li class="sidebar_films_item">Сталкер (1979)</li> 
    </ol> 
  </div> 
  <!-- sidebar --> 
  <div class="content"> 
    <div class="content_photo"> 
      <!--<img src="images/hook.jpg" alt="">--> 
    </div> 
    <div> 
      <blockquote> 
        <p class="content_quote">"If you have a procedure with ten parameters, you probably missed some."</p> 
      </blockquote> 
    </div> 
    <h1 class="content_title">Jackie Chan</h1> 
    <p class="content_item">Люди считают меня оптимистичным, инициативным членом команды с отличными навыками общения. Последние несколько лет я занимаюсь подготовкой руководящих кадров, работаю в сфере телемаркетинга и обслуживания клиентов в разных отраслях промышленности. 
      Я обладаю опытом успешного назначения людей на должности уровня начальников технологических отделов и подготовки эффективных руководителей. В моем послужном списке – поддержание постоянного объема назначений и мероприятий. Кроме того, я постоянно 
      вхожу в первую десятку по объему продаж и мог бы делать то же самое для вашей компании</p> 
    <h3 class="content_title">Мои увлечения...</h3> 
    <p class="content_item">изучаю восточную культуру, языки; увлекаюсь оригами; занимаюсь художественным переводом книг; реставрирую старинные церкви и здания; выходные дни провожу на раскопках исторических поселений; уделяю время сбору мусора на пляжах, в лесах, лесопосадках; 
      благоустраиваю свой город; рисую мультипликационные фильмы; создаю развивающие книги для детей.</p> 
    <a class="content_link" href="URL">напиши мне</a> 
    <div> 
      <!-- content --> 
      <div> 
        <!-- wrapper -->

READ ALSO
Выравнивание элементов из разных дивов

Выравнивание элементов из разных дивов

Нужно выровнять блоки из разных дивов относительно друг друга в номерном порядкеЯ ищу какое-то свойство, вроде order-group(<-- придуманное свойство),...

237
Выбор последней записи в 4 категориях

Выбор последней записи в 4 категориях

есть таблица курсов 4-х валют

224