(css такой темный лес... Читаешь книжку, там одно, а на практике получаются только примитивные примеры из книжек, а если чуть сложнее задача, то и гугл не в помощь! и даже в сети нет решения)

Таблицу нарисовал. Пара колонок <td>, пара строк <tr>.
В левой колонке текст всегда вверху, такое у меня уже есть.
Проблема с вертикальным выравниванием трех блоков в правой колонке.

В правой колонке в каждой строке должно быть три части:
- одна часть должна быть всегда верхняя,  это всегда одна строка.
- вторая, от 0 до несколько строк, должна идти сразу за верхней строкой, т.е. тоже прижата вверх.
- третья же часть это одна строка, которая всегда должна быть в нижней части каждой строки <tr>.
  
 Если в левой колонке мало текста, то все нормально, те. правая колонка выравнивается так как и хотел.
 Но если левая колонка имеет в строке много строчек текста, а в правой мало, то
в правой колонке две части прижимаются вверх, а вот третью никак не могу прижать вниз:


Вариации с 
table tr td{vertical-align:bottom;}
table tr td{vertical-align:top;}
что то не помогают.
Можно конечно каждую из пары строк разбить еще на пару-тройку строк, 
и тогда выравнивание будет проще, наверное, но тогда сама таблица усложняется, и скорее всего так будет неправильно. Можно как то правильно решить такую задачу?

Тут дело в том, что vertical-align : top bottom или middle работают как-то не всегда понятным образом, приходилось встречаться с тем, что ДОЛЖЕН выровнять, а не выравнивает. То ли это оттого что они всё равно рассматриваются в одном потоке, а не отдельно, то ли ещё по какой причине...

Вполне возможно, что top, middle или bottom рассматривается не как верх, середина и низ td-ячейки, а как верх, середина и низ ТЕКСТОВОГО БЛОКА, в котором сидят эти элементы?

А что если - как варианты:

1) Вместо одной строчки с тремя текстами сверху, посередине и справа - а что если сделать ТРИ строчки?
В верхней элемент позиционировать как top, в средней как middle, в нижней как bottom?

Или задать высоты как 10% 80% и снова 10%?
тогда визуально будет выглядеть что верхний элемент "прижат к верху", а нижний "прижат к низу"?

В другой же колонке "слить" эти ячейки в одну через td rowspan=3

2) Выдернуть их из видимости общего потока выравниванием float:right или float:left? Возможно после float элементы станут прижиматься к низу, как и положено?

3) Может использовать абсолютное позиционирование? Ну то есть написать явно


Посмотрите - получается?

Только учитывайте, что при абсолютном позиционировании элемент будет позиционироваться относительно своего непосредственного родителя, и наверно span должен лежать непосредственно внутри <td></td>

Сisa, ты не совсем понимаешь суть таблиц, да и вообще HTML. Перечитай ещё раз.

Решение
http://jsfiddle.net/BaNru/so8wkvuo/

Запусти Firefox, зайди в Веб-Консоль и посмотри 3D вид (может в настройка Веб-Консоли надо предварительно включить)


Любой элемент на странице - это объект, будь-то блочный, табличный, строчный или любой другой. И его нельзя просто так взять и раскидать по странице как тебе вздумается, он всегда одно целое. Если надо разбить строку, условно говоря, в разные углы, то придется обернуть части строки в новые элементы/объекты. И уже эти объекты разносить.

В твоём случае тебе надо верх, середину и низ ячейки также разбить. Ты же сам разбил на три пункта

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

aLEXperimentator, рано ты ему про позиционирование рассказываешь. Да и наверняка там в условие будет, что "строчки" эти в третьем столбике будут тоже разной длины. И тогда при позиционирование текст может наехать на соседа.

PS Таблицы это легко. Вот когда до дивной верстки дойдешь, тогда ты будешь с радостью вспоминать времена изучения таблиц   

Это сообщение отредактировал(а) BaNru - 22.9.2014, 03:34

aLEXperimentator, BaNru спасибо за ответы!
 Вчера наверно излишне усложнил задачу, сказав что в таблице пара строк, хотя можно вполне экспериментировать с одной табличной строкой tr.
 Что у меня получилось:
 1. Абсолютное

не то что требовалось.

2. Самое лучшее из предложенного варианта BaNru (переделанное)

не то что хотелось бы.

3. С объединением колонок

опять не то что хотелось бы.

4. Кстати о птичках, объединение ячеек в этой таблице какое странное

если  сказать точнее то хуже не придумать, например заменив colspan="3" на rowspan="3" !!!

5. Усложнить таблицу так вообще то задача не ставилась. 
Что мы видим даже в самом лучшем из рассмотренных вариантов? Вместо одной строки tr их уже три, причем левая колонка тоже дробится на части, что вообще не нужно. Таких tr на странице все же будет не одна а *-дцать, и эти -дцать умножить на 3 ? Простенькая задача. В тупик ставит определенно. Откроешь иногда файл стилей на каком либо сайте, а там > 5000 строк, а таких файлов к странице подключено ну просто туча! Такая вот арифметика, оттого темный лес это css. Наверно примерно так же думают и авторы браузеров, не уделяя должного внимания правилам визуального отображения информации. Я не то чтобы не совсем понимаю суть таблиц, я их вообще не понимаю! ( по книжке пишут что должно работать, на самом деле смотри примеры 2, 3, 4). А без css нельзя.

6. Вчера нашел более менее приемлемое решение, это vertical-align: top; margin: 0 0 0 60%;  для футера vertical-align:bottom;, что должен быть внизу. Но тоже не супер решение, потому что если справа текст в середине  не короткий, то после него перед футером остается свободное пустое место, совершенно не нужное в таблице, в строке. Почему не нужное? потому что строк же много, таблица  будет зиять пустотами.

чем-то все равно придется усложнять. раз уж таблица, делайте все табличными средствами, потом разбираться будет проще
http://jsfiddle.net/g3L7bLhv/

Я только добавил основной текст в правой средней части. Разместить между блоками красным и синим не получилось, но зато прекрасно такой блок размещается в красной зоне.
И много текста в левой части не портит картинку.
И много текста в правой части тоже не портит картинку. 
И самый простой текст html ! 
И css всего пара строк (vertical-align:top; vertical-align:bottom;)

baldina спасибо! Это отличное решение!

Это сообщение отредактировал(а) Сisa - 22.9.2014, 18:46

Сisa, я не понял. что мешает добавить текст в красный блок? он выровнен по верхнему краю. что мешает добавить еще одну ячейку между? на красный и желтый все это не влияет.
например
http://jsfiddle.net/v7jfotfe/

Добавлено через 6 минут и 47 секунд
так? http://jsfiddle.net/fq33sehh/

Это сообщение отредактировал(а) baldina - 22.9.2014, 18:42

baldina, Вы меняете мое восприятие css с диковинного на положительное.
Наверно надо все таки приложить усилия и перечитать (через не хочу) все то, от чего увиливал долгое время, потому как больше внимания уделял функциональности, т.е. js.
+++!!! http://jsfiddle.net/v7jfotfe/

вы путаете colspan и rowspan. в вашей разметке в пункте 4 нужно использовать второе.

Смешно наверное, но заменив 
colspan="3" на rowspan="3" у меня получается именно так, что хуже уже не придумать! А по книжкам должно вроде как получиться объединение ячеек, и по строкам, по по колонкам.

http://jsfiddle.net/d61s0hyn/

нее, книжки css все таки надо мне читать! 
Ну все же просто, и почему так сразу не сделать:



Это сообщение отредактировал(а) Сisa - 23.9.2014, 18:44