Обтекание рекламного блока

Статус
В этой теме нельзя размещать новые ответы.
O

OnArs

Гуру форума
Регистрация
30 Авг 2008
Сообщения
258
Реакции
74
Здравствуйте, Нульдяне! :)

Подскажите пожалуйста:
Как сделать так чтобы при обтекании объекта сверху не оставалось пустоты?
В данном случае для "жёлтого" слоя используются сдледующие настройки стиля:
Код: 
   #layer {
    float: left; 
    background: #fd0; 
    margin: 100 0 0 0;
    border: 1px solid black; 
    padding: 10px; 
    width: 40%; 
   }

html код страницы:
HTML: 
  <div id="layer">
  Жёлтый слой
  </div>
  <div style="clear: left"></div>
  <p>Много текста здесь...</p>
В прикреплении 2 скриншота, 1.jpg как сейчас, 2.jpg как требуется сделать.
Заранее благодарен всем ответам! :ay:
 

Вложения

  • 2.jpg
    2.jpg
    45,8 KB · Просмотры: 13
  • 1.jpg
    1.jpg
    53,4 KB · Просмотры: 2
HTML: 
   #layer {
    float: left; 
    background: #fd0; 
    margin: 5px;
    border: 1px solid black; 
    padding: 10px; 
    width: 40%; 
   }

HTML: 
<body>
тут много текста
<div id="layer">Жёлтый слой</div>
а тут тоже дофигища текста
</body>

если используете тег p, то обнулите его, иначе будет не совсем как на скрине (параграф добавляет свои отступы)
 
Большое спасибо за ответ, но такой вариант не совсем подходит, т.к. у меня строгое расположение элементов:

Сначала <div>, затем <p>

И двигать Я их не могу.

Какие - то альтернативные варианты существуют?
 
строгое расположение элементов можно сделать, к примеру, с помощью отрицательных марджинов... уверены что осилите? Если интересно, посмотрите
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Такой вариант подойдет или создание нового дива так же не желательно?

HTML: 
   #wrapper {
    float: left; 
    margin: 5px;
    width: 40%; 
    padding-top: 100px;
   }

   #layer {
    float: left; 
    background: #fd0; 
    border: 1px solid black; 
    padding: 10px; 
   }

  <div id="wrapper">
  <div id="layer">
  Жёлтый слой
  </div>
  </div>
  <div style="clear: left"></div>
  <p>Много текста здесь...</p>
 
У меня вот что получилось по приведённому Вами коду...

Что-то мб не праивльно делаю? :bc:
 

Вложения

  • 3.jpg
    3.jpg
    36,9 KB · Просмотры: 1
Я в прошлый раз код не проверил - просто хотел показать идею, но если нужен полностью рабочий пример, то вот он

HTML: 
  <style> 
   #wrapper {
    float: left; 
    margin: 5px;
    width: 40%; 
    padding-top: 100px;
   }
   #layer {
    background: #fd0; 
    border: 1px solid black; 
    padding: 10px;
   }
  </style> 
   
  <div id="wrapper">
  <div id="layer">
  Жёлтый слой
  </div>
  </div>
  <p>Много текста здесь</p>

На сей раз удостоверился в правильности отображения в IE, FF и Chrome
 
OnArs, эту конструкцию
HTML: 
 <div style="clear: left"></div>
  <p>Много текста здесь...</p>

заменяешь на
HTML: 
Много текста здесь...

баг должен исчезнуть.
 
Покажите мне скриншоты того что у Вас получилось, т.к. у меня получается всё так же как в моём Для просмотра ссылки Войди или Зарегистрируйся
 
Вот из Crome, например.

В остальных примерно та же картина.
 

Вложения

  • yellowblock.png
    yellowblock.png
    36,1 KB · Просмотры: 3
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху