Задать вопрос
@vgrayster
html

Как заставить div учитывать float у других элеиментов

Добрый день, нужно сделать следующее image

Как заставить DIV помеченный вопросиками учитывать, что слева есть картинка? если его просто вставить, то граница дива ничинается от края родительского DIV. а картинка просто его перекрывает. А мне нужно, чтобы граница дива была как нарисовано на картинке.

PS: почему-то картинка не видна, вот ее адрес habreffect.ru/ff4/b5e029e79
  • Вопрос задан
  • 3032 просмотра
1 комментарий
Подписаться 4 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 4
@vgrayster Автор вопроса
что-то похожее получилось сделать добавив к диву
float: left;
width: 400px;


но теперь проблема в том, что текст обтекает и проблемный див. а мне этого совершенно не нужно.
Ответ написан
Комментировать
Комментировать
@hom9k
Повесьте диву margin-left: <ширина картинки + отступ от картинки>
Ответ написан
2 комментария
2 комментария
@MSwind
.container {
margin-left: auto;
margin-right: auto;
width: 960px;
}

.for_image {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 440px !important
}

.for_text {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 40px !important
}


Как-то так… width для for_image установите тот который реально нужен будет…
Ответ написан
1 комментарий
1 комментарий
Delka
@Delka
задайте этому div {overflow: hidden}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
div.block {}
div.block img {float: left;}
div.block div {overflow: hidden;}
/*]]>*/
</style>
</head>
<body>
  <div class="block">
    <img src="http://placekitten.com/200/300" alt="" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere orci a dui egestas id lobortis nulla scelerisque. Mauris eu neque sed tellus vestibulum ornare. Vivamus malesuada venenatis lectus, sit amet feugiat quam pretium eget.</p>
    <div>Donec sollicitudin justo et justo commodo</div>
  </div>
  </body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Ещё заказы