Вопрос по верстке

самый простой вариант -- взять ту верстку, просто выводить одинаковые div одного цвета каждый час, который идет событие

К сожалению, такой вариант не подходит:(

тогда опять же теоретически:

рассчитывать высоту каждого дива в зависимости от часов, а потом всякими float:left; clear:both; выравнивать его.

Тогда возникнет проблема, если на один час будет много событий и они будут расположены, например, не в 2-х строках, а в 3-х строках.

для всего что сможешь сверстать, скорее всего сможешь и написать авто-алгоритм для верстки.

просто делаешь высоту дива больше, на дивах которые справа ставишь float:left;

на крайних правых дивах для переноса, если не ошибаюсь, clear:right;

Что за маниакальное стремление таблицы делать дивами? "Дивы рулят, таблицы сосут?" Для блоков - согласен. Но все ведь надо к месту применять.

Например, девушка в юбке выглядит лучше, чем в брюках, согласны? Так, что ж вы, ТС, юбки не носите? Они ж круче! Понимаете разницу видимо между М и Жо, да? Так вот в данном случае разница между div и table - такая же.

Но если уж вы такой бездумный маньяк - нате:

<style type="text/css">

	.hour, .time, .e {

		height: 30px;

		font-size: 12px;

	}

	

	.hour {border: 1px solid #999;}

	

	.time {

		width: 40px;

		float: left;

		border-right: 1px solid #999;

	}

	

	.events {float: left;}

	

	.e {

		width: 180px;

		float: left;

		position: relative;

	}

	

	.e DIV {position: absolute;}

	

	.hour0-5, .hour1, .hour2, .hour1-5 {width: 100%;}

	

	.hour0-5 {height: 15px;}

	.hour1 {height: 30px;}

	.hour1-5 {height: 45px;}

	.hour2 {height: 60px;}

	

	.half-hour {top: 15px;}

	

	.red {background: red;}

	.yellow {background: yellow;}

	.green {background: green;}

</style>





<div>

	<div class="hour">

		<div class="time">9:00</div>

		<div class="events">

			<div class="e">

				<div class="red hour0-5">событие на пол часа</div>

			</div>

			<div class="e">

				<div class="yellow hour1">событие на час</div>

			</div>

			<div class="e">

				<div class="green hour2">событие на два часа</div>

			</div>

		</div>

	</div>

	<div class="hour">

		<div class="time">10:00</div>

		<div class="events">

			<div class="e">

				

			</div>

			<div class="e">

				<div class="red half-hour hour0-5">событие на вторые полчаса</div>

			</div>

			<div class="e">

				

			</div>

		</div>

	</div>

	<div class="hour">

		<div class="time">11:00</div>

		<div class="events">

			<div class="e">

				<div class="green half-hour hour1-5">событие на полтора часа</div>

			</div>

			<div class="e">

				

			</div>

			<div class="e">

				

			</div>

		</div>

	</div>

	<div class="hour">

		<div class="time">12:00</div>

		<div class="events">

			<div class="e">

				

			</div>

			<div class="e">

				

			</div>

			<div class="e">

				<div class="red hour0-5">событие на пол часа</div>

			</div>

		</div>

	</div>

</div>

Ну обратитесь к опыту http://calendar.yandex.ru хотя бы. На мой взляд, они это довольно грамотно решили

pimandr, большое спасибо за помощь)