2 колонки с позиционированием текста внизу в 1 колонке

[Aurica]

Всем доброго времени суток. Имеется список вакансий. Должно быть так:

На данный момент так:

одна вакансия, 2 блока левый блок плавающий.

1) надо сделать левый блок растягивающимся по высоте правого. (в принципе необязательно, я могу сделать нижнюю рамку у контейнера родителя. А с другой стороны, как тогда прибить этот блок к низу родительского блока?)

2) надо прибить текст в левой колонке к низу.

html-код

<div class="elem">
...
  <div class="elem_title">
	<a href="?rm=show_vacancy;vacId=3446">
	  бухгалтер
	</a>
  </div>
  <div class="info_left">
	24.07.2010<br/>
	<a href="?rm=show_vacancy;vacId=3446">
	  ...
	</a>
  </div>
  <div class="info_right">
	<b>компания: </b>Trest-Info<br/>
	<b>требования: </b>
	...
  </div>
</div>

css-код

body, table, tr, td {
	margin:0;
	padding:0;
	border:0;
}
body {
	font-size:11px;
	font-family:Verdana, Tahoma, sans-serif;
	color:#777777;
	text-align:center;
	padding:0.5em;
}
...

table.category_vac_cv th, p.list_title {
	#background-color:#EFF7DF;
	background-color:#EAF0DA;
	color:#223311;
	font-family:Tahoma, Arial, sans-serif;
	text-transform:uppercase;
	text-align:center;
	vertical-align:middle;
	padding: 4px 0;
	border:0 #112200 solid;
	border-width:1px 0;
}

a {
	color:inherit;
	text-decoration:none;
}
...
p.list_title {
	width:100%;
	font-weight:bold;
	border:0;
	letter-spacing:0.3em;
	margin-bottom:1em;
}

div.elem {
	text-align:left;
	margin:0px;
	padding:0px;
	color:#777777;
	font-size:0.91em;
	overflow:hidden;
}

div.elem_title {
	color:#607450;
	font-size:inherit;
	text-transform:uppercase;
	text-decoration:underline;
	font-weight:600;
	padding-left:1.82em;
	margin:0.3em 0;
}
div.info_left, div.info_right {
	font-size:inherit;
	border: 1px solid #C7D5B9;
	padding:0.3em 0.5em;;
}
div.info_left {
	border-width: 1px 0 1px 0;
	vertical-align:bottom;
	float:left;
	width:12.73em;
}
div.info_right {
	border-width: 1px 0 1px 1px;
	margin-left:13.82em;
}

ссылки на сгенерированные страницы:

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

список вакансий

Увидела, что на странице элементарно нет doctype. Добавила. Не сработало, все то же самое.

Добилась валидации и css и hml на страничке с одной вакансией.

Так что вопрос в силе.

Edited July 25, 2010 by Aurica

[x-doggy]

В данном случае лучше и приемлемее всего использовать таблицы!

[Ururu]

На 1 вакансию используйте 6 блоков с отступами.

1- родительский, 2 и 3 пустой в левом верхнем углу и в правом с контентом, 4 - внизу с иконкой, 5 - справа с отступами под контентом и 6 блок радделитель между 2-3 и 4-5.

[Searcher]

Зачем 6? Можно ж и на 3-х сделать, плюс параграфы в тексте. 1 - общий, 2 - правый, 3 - левая картинка с датой.

[rediskavet]

вот можно так попробовать.

<div class="wrapper">
	<div class="left">
	</div>
	<div class="rigth">
	</div>
</div>

А в CSS

.wrapper{
overflow:hidden;
position:relative;
width:100%;
}

.left{
width: 20%;
float: left;
position: absolute;
bottom:0;
left:0;
}

.right{
margin-left: 20%;
width: 80%;
}