Вопрос необычного обтекания слоя в верстке div'ами (обтекаемый блок снизу справа)



С рисунка думаю вопрос понятен.
Если есть решения — жду с нетерпением!
ВОПРОС РАССМОТРЕН, ЧИТАЕМ ДАЛЬШЕ.
Нашел решение для фиксированной высоты-
Это полный кодинг( можно скопировать полностью и посмотреть:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css" >
<title>title</title>
<style type="text/css">
html, body{
    height:100%;
    font-size:12pt;    
}
.title{
    color:#EEF909;
    font-size:30pt;
    margin:10px;
}
#code{
    margin:10px;
    margin-bottom:10px;
    color:#980E28;
    font-size:15pt;    
}
.article {
    background-color:#9EA4D6;
    position:relative;
    height:500px;
    margin:5px;
    padding:2px 0 0 20px;
    width:400px;
    border:1px dotted purple;
    overflow: hidden;
}
.article p {
    margin-right:5px
    font-size:15pt;
}
.article #rightdiv, .article #bottompusher{
   float:right;
   clear:right;
}
.article #rightdiv{
   padding-top:50px;
   text-align:center;
   color:#EEF909;
   font-size:30pt;    
   background-color:#980E28;    
   width:200px;
   height:200px;
   border:1px solid black;
   margin:20px 0 0 2px; 
}
.article #bottompusher {
   display:inline;
   margin-top:-250px;
   width:1px; 
   height:100%; 
/*   background-color:#f00; */
}
</style>
</head>
<body>
<div class="article">
    <div class="title">content</div>
    <div id="bottompusher"></div>
    <div id="rightdiv">rightdiv</div>
    <div id="code">
    <!-- text code -->
<div class="article">
    <div class="title">content</div>
    <div id="bottompusher"></div>
    <div id="bottomfloater">rightdiv</div>
    <div id="code">
       code  
    </div>
       Text
</div>
    <!-- end text code -->    
    </div>

<p>
    Всем зачастую приходится писать систему защиты от спамеров,
когда занимаешься разработкой гостевой книги. Бывает так, что нет
GD библиотеки для изображений на сервере. Поэтому не получается
сформировать проверочные символы в виде имиджа. Предлагаю метод как
сделать простую капчу используя только javascript, а в частности innerHTML. </p>
</div>
</body>
</html>

ЗДЕСЬ можно посмотреть результат через firebug

Вот часть логики кодинга(чисто дивы):


<div class="article">
    <div id="bottompusher"></div>
    <div id="rightdiv">rightdiv</div>
text
</div>


Разжую — bottompusher — невидимый слой или картинка имеющий единичную ширину и толкающий как бы вниз нужный нам уголок rightdiv.
Минусы очевидны — пример работает на фиксированной высоте, т.е. при добавлении текста он не растягивает наш слой вниз. Далее, если сделать плавающую высоту, то наш уголок не будет опускаться вниз, т.к. подпирающий pusher имеет фиксированную высоту. Чтобы выставить высоту «толкателя» в %, нужно чтобы все его родительские слои имели высоту, а это опять же ограничение для текста расстягивающего слой. И последний неприятный момент — вложенные флотирующие картинки или слои будут портить разметку контента, если мы будем его заполнять еще чем-либо, кроме текста.
Итог: универсального красивого решения для такой простой казалось бы задумки нет. Мучать себя порченой разметкой не хочется.Я уже не вспоминаю даже про включение JS в кодинг. По-моему это ужастно включать JS чтобы разметить слои. Отказываюсь от такой задумки до лучших времен.
Всем спасибо.

Комментарии (14)

RSS свернуть / развернуть
+
0
а позиционированием пробовал?
avatar

Olga

  • 12 октября 2010, 10:38
+
0
я уже все оппробовал… учусь-читаю-учусь-читаю)
avatar

PigmaLion

  • 12 октября 2010, 10:41
  • ↑
+
0
поиграйся с позиционированием и поставь еще свойсво block правому диву
avatar

Olga

  • 12 октября 2010, 10:40
+
0
не понял вопрос. для меня бестолкового сформулируй, пожалуйста, вопрос.
avatar

degtyarchuk

  • 12 октября 2010, 10:41
+
0
нужно маленький блок прижать справавнизу внешнего, чтобы еще и текст обтекал
avatar

Olga

  • 12 октября 2010, 10:46
  • ↑
+
0
bottom:0px; right:0px; position:relative; float:right;
avatar

degtyarchuk

  • 12 октября 2010, 10:51
  • ↑
+
0
хи-хи. свойства bottom, right НЕ применимы для position:relative. В том-то и дело. А если задать absolute, то не будет обтекания.
avatar

PigmaLion

  • 12 октября 2010, 11:19
  • ↑
+
0
что мешает убрать position?
bottom:0px; right:0px; float:right; width:100px; height:100px;
avatar

degtyarchuk

  • 12 октября 2010, 11:24
  • ↑
+
0
position: Значение по умолчанию -static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
url — htmlbook.ru/css/position
avatar

PigmaLion

  • 12 октября 2010, 11:31
  • ↑
+
0
сами себе люди противоречат )))
htmlbook.ru/html/div
читай стили внизу.
я тебе ещё раз говорю, что мешает вообще убрать position? вообще не писать такое слово.
avatar

degtyarchuk

  • 12 октября 2010, 11:54
  • ↑
+
0
да пробовал, Серега)
avatar

PigmaLion

  • 12 октября 2010, 12:41
  • ↑
+
0
просто сделайте пример как на картинке. У меня пока вариантов нету.
avatar

PigmaLion

  • 12 октября 2010, 10:48
+
0
посоветовалась с грамотным верстальщиком, он говорит создать еще один псевдоrightdiv-невидимый, и ему задать фиксированные параметры(ширина и высотаи float:right;) а самому rightdiv задать (bottom:0px; right:0px; position:relative; float:right; ) или без позиционирования, надо поигратся.
когда текста будет мало-то блок и так будет справа, а когда текста больше, то блок будет сползать вниз и текст будет обтекать. Попробуй.Больше ничего не могу посоветовать.

P.S.Как найдешь выход-отпишись, интересно;)
avatar

Olga

  • 12 октября 2010, 14:19

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.
Не забываем смотреть статистику:

Яндекс цитирования