Позиционирование div'а

[Ana1oliy]

Здравствуйте!

Я только начал изучать web дизайн, это мой первый проект.

у меня такая проблема: div коряво располагается в доступном пространстве.

код html

<td id="notesline" colspan=3>
	<div id="fullnotes">
		<div class="note">
			<div class="oldnotetext"><a href=#>Какой-нибудь текст</a></div>
		</div>
		<div class="note">
			<div class="oldnotetext"><a href=#>Текст</a></div>
		</div>
		<div class="note">
			<div class="midnotetext"><a href=#>Текст</a></div>
		</div>
		<div class="note">
			<div class="newnotetext"><a href=#>Какой-нибудь длинный-длинный-длинный текст</a></div>
		</div>
		<div class="note">
			<div class="neitralnotetext"><a href=#>Какой-нибудь длинный-длинный-длинный текст</a></div>
		</div>				
	</div>
	<div id="notescolumn">
		<div class="notestr">
			<span class="old"><b>! </b><a href=#>Какой-нибудь текст</a></span>
		</div>
		<div class="notestr">
			<span class="old"><b>! </b><a href=#>Какой-нибудь текст</a></span>
		</div>
	</div>
</td>

CSS

.note{
	position:relative;
	width:100px;
	height:100px;
	text-align:center;
	font-family:comic sans ms;
	font-size:8pt;
	margin:2px;
	float:left;
	display:table;
	border-collapse:none;
	border-spacing:2px;}
.note div{
	display:table-cell;
	vertical-align:middle;
	margin:2px;
	border:1px solid black;}
#notesline{
	position:relative;
	border:1px solid black;
	height:106px;}
#fullnotes{
	position:relative;
	float:left;
	border:1px solid red;}

#notescolumn{
	position:relative;
	margin-top:2px;
	border:2px solid green;}
.notestr{
	position:relative;
	font-family:comic sans ms;
	font-size:8pt;
	width:100%;
	height:20px;}

Как исправить?

Может кто подскажет более приемлемый вариант.

А идея такая:

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

Edited September 4, 2012 by Ana1oliy

[wwt]

http://jsfiddle.net/uNeMZ/ примерно так можно