Xpoint
   [напомнить пароль]

Как задать 50% ширину для двух дивов в ячейке?

Метки: [без меток]
2008-07-31 13:33:58 [обр] McKey[досье]

Есть ячейка в которой находятся 2 дива с заданным цветом бэкграунда:

<td><div id="1"></div><div id="2"></div></td>

Как сделать так чтобы каждый див занимал 50% ячейки?
Пробывал width:50%; и padding: auto; - не помогает.

спустя 16 минут [обр] Алексей В. Иванов(197/2861)[досье]
М Перенесено из форума "Интернет::Стандарты"
спустя 8 минут [обр] Thirteensmay(3/157)[досье]
<table border=1 width='300px'>
  <tr>
    <td>
     <div style='background-color:ff0000;width:50%;float:left'>1</div>
     <div style='background-color:0000ff;width:50%;float:left'>2</div>
   </td>
  </tr>
</table>
спустя 4 минуты [обр] McKey[досье]
Я неправильно немного сформулировал вопрос.
Нужна не ширина, а высота. Кнопку редактирования чё-то так и не нашел. :(
спустя 19 минут [обр] Thirteensmay(3/157)[досье]
Ну так не тормозим, убираем float:left и вместо width пишем height
спустя 38 минут [обр] Fenrir(0/3)[досье]
А высота ячейки задана? Без неё height:50% не сработает.
спустя 9 минут [обр] McKey[досье]

Нет, высота ячейки произвольная.
Вот тестовый html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style type="text/css">
div.feedback {
  margin:10px;
}
table.feedback {
  border-left: 1px dotted #ccc;
  margin: 0 0 10px 10px;
  padding-left: 10px;
  width: 150px;
}

table.assignment_history {
  font-size: 12px;
  width: 100%;
  white-space: normal;
  border-collapse:collapse;
  border-color:#999;
  border-style:solid;
  border-width:1px 0px 0px 1px;
  font-family:Arial,Lucida Grande,Lucida Sans,Verdana,sans-serif;
}

table.assignment_history td{
  border-color:#999999;
  border-style:solid;
  border-width:0px 1px 1px 0px;
}

th.feedback, td.feedback{
  width: 40%;
  padding: 0;
}

div.feedback .no_data {
  color: #999;
  font-style: italic;
  font-size: 11px;
}

div.feedback_recived {
  border-bottom: 1px dotted #ccc;
  padding: 5px;
  background-color: #ffffcc;
  height:50%;
}

div.feedback_given {
  padding: 5px;
  background-color: #d8f7f6;
  height:50%;
}
</style>

<table cellpadding="5" cellspacing="0" border="1" class="assignment_history">
<tr>
<td>&nbsp;<br /><br /><br /><br /><br /><br /></td>
<td class="feedback" align="left" rowspan="2">
     <div class="feedback_recived">1</div>
     <div class="feedback_given">2</div>
</td>
<tr>
<td>&nbsp;<br /><br /><br /><br /><br /><br /><br /></td>
</tr>
</tr>
</table>
<html>

C таким DOCTYPE height:50% не работает. Изменить DOCTYPE нельзя.

спустя 26 минут [обр] McKey[досье]
Ещё обнаружилось, что DOCTYPE на отображение не влияет - height:50% игнорируется в любом случае.
спустя 10 минут [обр] Thirteensmay(3/157)[досье]
брехня, влияет
<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
<table border=1 width='100px' height='300px'>
  <tr>
    <td>
     <div style='background-color:ff0000;height:30%'>1</div>
     <div style='background-color:0000ff;height:70%'>2</div>
   </td>
  </tr>
</table>
спустя 41 минуту [обр] McKey[досье]

Соседи, сволочи, стену сверлят - башка варит с трудом.
Хотел сказать, что DOCTYPE не влияет на отображение в ФФ3.

<table height='300px'> - высота таблицы должна быть произвольной.

спустя 1 минуту [обр] McKey[досье]
Попробывал эти 2 дива заменить на таблицу с height:100% - таже фигня. Не растягивается она на всю ячейку. :(
спустя 1 час 12 минут [обр] Thirteensmay(3/157)[досье]
Еще раз Вам говорю - DOCTYPE влияет, и в FF и в IE, см. любой мой пример. И в Вашем влияет тоже, только Вы высоту ячейки не указали, поэтому оно вообще не работает. Высоту как Вам сразу показали (и повторно сказали) надо указывать. Браузер не бог, работает как умеет, в данном случае высоту ему надо указать, 100% это и будет ваша произвольная высота. См. следующий пример:
<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
<table border="1">
 <tr>
  <td>&nbsp;<br /><br /><br /></td>
  <td rowspan="2" height='100%'>
   <div style='background-color:ff0000;height:50%'>1</div>
   <div style='background-color:00ff00;height:50%'>2</div>
  </td>
 </tr>
 <tr>
   <td>&nbsp;<br /><br /><br /><br /><br /><br /></td>
 </tr>
</table>
спустя 20 минут [обр] McKey[досье]
Thirteensmay[досье]
Вы <!-- --> уберите и гляньте как выглядит Ваш пример.
спустя 5 минут [обр] Thirteensmay(3/157)[досье]
Что Вы хотите сказать что ничего не меняется ? У меня меняется в 4 браузерах на разных машинах. Поэтому и говорю - DOCTYPE влияет.
спустя 19 минут [обр] McKey[досье]

Я говорю то, что без DOCTYPE (либо если он закоменчен <!-- -->) выглядит как надо. Но если он есть, ни дивы ни таблица не может растянутся на всю высоту ячейки (height:100% для ячейки не помогает).

Необъявление DOCTYPE не оказывает эффекта только в Фаерфокс 3 - там в любом случае не тянется.

спустя 5 минут [обр] Thirteensmay(3/157)[досье]
Странно, у меня FF 3.0.1, без DOCTYPE все прекрасно тянется, также как и в IE.
спустя 37 секунд [обр] McKey[досье]

Хотя нет, проверил ещё раз ваш пример - ФФ3 по действию ничем от ФФ2 и ИЕ7 не отличается.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<table border="1">
 <tr>
  <td>&nbsp;<br /><br /><br /></td>
  <td rowspan="2" height='100%'>
   <div style='background-color:ff0000;height:50%'>1</div>
   <div style='background-color:00ff00;height:50%'>2</div>
  </td>
 </tr>
 <tr>
   <td>&nbsp;<br /><br /><br /><br /><br /><br /></td>
 </tr>
</table>

Вот такой код выглядит криво во всех браузерах.

спустя 41 секунду [обр] McKey[досье]
В том то и дело, что я не могу ни убрать ни закоментить DOCTYPE
спустя 20 часов [обр] Fenrir(0/3)[досье]
Сделать ложные колонки. Фоном ячейки. См. http://www.alistapart.com/articles/fauxcolumns/ и метод Faux Columns вообще.
спустя 1 час 6 минут [обр] McKey[досье]
Fenrir[досье]
Как я написал выше, мне надо чтобы не по ширине тянулись дивы, а по высоте.
спустя 1 день 6 часов [обр] Fenrir(0/3)[досье]
Метод Faux Columns и создан для имитации одинаковой высоты. Вы вообще смотрели ссылку?!
спустя 1 день 16 часов [обр] McKey[досье]
Чё-то не пойму каким боком мне этот метод можно применить... мне не надо иммитировать высоту, мне надо заполнить ячейку дивом.
спустя 17 дней [обр] Fenrir(0/3)[досье]
Зачем вам ее заполнять? В большинстве случаев это нужно только для наличия фона, чтоб визуально колонки равной высоты были. В этом случае тянуть их фактически не нужно, достаточно смухлевать с фоном. В редких оставшихся случаях равная высота нужна для "прибивания" чего-либо к низу одной из равных колонок. Для этого случая нужна комбинация из двух трюков - ложные колонки и "прибивание футера". А реально равная высота опять не нужна.
спустя 2 года 8 месяцев [обр] kovrolin[досье]
Powered by POEM™ Engine Copyright © 2002-2005