Вопрос с выводом данных в горизонтальной верстке
 

Делаю сайт на ASP .NET MVC + MSSQL вывожу на страничку записи из БД и они как полагаются распространяются сверху в низ, мне же нужно - если очередная запись из БД не помещяется на экран ( например, по высоте окна браузера) то перенос правее.
Скриптом могу определить размер экрана браузера пользователя и размер ячейки <td>. Картинки какой сечас вывод

Разметка:
<table class="wall" id="labelwall" >
<tr>
<td> @*line-height: 0px; font-size: 0px;*@
@{
if (string.IsNullOrWhiteSpace(Model.CoverImage))
{
<img src="@Url.Content("~/Content/CoverImage/0.jpg")" alt="CoverImage" id="img0" />
}
else
{
<img src="@Url.Content("~/Content/CoverImage/" + User.Identity.Name + "/CoverImage" + Model.CoverImage)" alt="CoverImage" id="img" />
}
}
</td>
<td>
<br /><br />
@using(Html.BeginForm("PostLabel","LabelWall")){
@Html.TextArea("Label", new { style="width: 250px; height: 150px; position: relative; resize: none;" })
<br /><br />
<input type="submit" value="Разместить" />
}

@foreach(var x in Model.PersonalLabel)
{
if(x.PersonalID==ViewBag.PersonalGuid)
{
<br /><br />
<table class="InternalLabel"> @*если что взять за основу ( помешяется ли в экран) ид из этой талицы id="internalLabel"*@
<tr>
<td>@{ Html.RenderAction("MiniAvaImage", "Home"); }</td>
<td style="font-size: 12px;">
@ViewBag.FullName<br />
@x.LabelWall.Date.Value.ToLongDateString()
</td>
</tr>
<tr>
<td colspan="2" style="padding: 2px;">@x.LabelWall.Text</td>
</tr>
</table>
}
}
</td>
<td>
<br /><br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa
<br /><br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa
<br /><br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br /><br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa
<br /><br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaffffffffffffaaa< br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaffffffffffffffff aaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaafffffffffffffffaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaafffffffffffffffff ffaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaafffffffffffffaaaa <br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaffffffffffaaaaa
@*</td><td>*@
<br /><br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaa
</td>
<td>
<br /><br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa
</td>
<td>
<br /><br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa<br />
adasdasdadasdadasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa
</td>
</tr>
</table>


<script type="text/javascript">
height = $(window).height();
img.style = "height: " + height + "px";
img0.style = "height: " + height + "px";
</script>
Как собственно реализовать скрипт для всей этой балды.

Коммент на ответ выше
 

Вопрос был не о статике, я уже позно подумал, что лутше было её убрать вовсе из приведенного кода, а в динамике, те записи что я вывожу из БД распространяются как им и положено сверху - вниз, а мне нужно справа - налево. Последние мысли на этот счет были - нумеровать каждый элемент ( или перебор всех элементов внутрней таблицы) и проверять их местоположение, если не выходит на рамки экрана браузера (сечас считаю через JS JQuery), то норм, если выходит, то перенос этого эелемента, только вот как это реализовать - меня путает вложеность таблицы и с выводом из одной и в ставкой в другой td.

Если забить на IE, то можно вот так вот:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body, div{height: 100%;margin:0;padding:0;}
span{
    display: inline-block;
    width:200px;
    height: 200px;
    border: 1px solid red;
}
div{
    resize:both;
    outline: 1px solid red;
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    -o-column-width: 200px;
    column-width: 200px;
}
</style>
<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Это как вариант. А так да, нужно на javascript динамически просчитывать все и раскладывать блоки в div'ы у которых float:left. Ибо с таблицами все громоздко получается.

Эксперементирую с вашим предложеным вариантом. Пока заметил что оно обязательно мостится на экран и прокрутка не появляется, вместо того что бы распластатся =) по горизонтали, пытается так сказать заполнить все щели и лезит в низ.

Что мы имеем с предоставленым кодом
 

1280x1024(601.38 kB)
Вот что получается, если отдалить камеру, то оно всетаки распространяется направо (resize: horizontal;), но всеравно прокрутку не создает. Меня интересует имено в горизонтальном распространении без вылеза за рамки экрана.

Можно прописать контейнеру overflow: auto - тогда появятся скроллбары. Но я не уверен этот вариант вообще приемлем.

overflow: auto пробывал, и на всякий случий перепробывал еще раз не помогает. Сечас разметка css пока не выношу, как будет норм так и сразу =)

<div style="resize: horizontal; /*outline: 1px solid red;*/ -webkit-column-width: 600px; -moz-column-width: 600px; -o-column-width: 600px; column-width: 200px; margin: 0; padding: 0;">
    <span >
         @{
             if (string.IsNullOrWhiteSpace(Model.CoverImage)) 
             { 
                 <img src="@Url.Content("~/Content/CoverImage/0.jpg")" alt="CoverImage" id="imga" />
             }
             else
             {
                 <img src="@Url.Content("~/Content/CoverImage/" + User.Identity.Name + "/CoverImage" + Model.CoverImage)" alt="CoverImage" id="img" />
             }
            }
    </span>
     <span style="display: inline-block;  max-width: 250px; max-height: 150px; column-width: 300px;">
        @using(Html.BeginForm("PostLabel","LabelWall")){
                @Html.TextArea("Label", new { style="width: 250px; height: 150px; position: relative; resize: none;" }) 
                <br /><br />
                <input type="submit" value="Разместить" />
            }
    </span>
               @foreach(var x in Model.PersonalLabel)
               {
                   if(x.PersonalID==ViewBag.PersonalGuid)
                   {
                       <br /><br />
                        <span style="display: inline-block;  max-width: 300px; max-height: 300px; column-width: 300px; ">
                            @{ Html.RenderAction("MiniAvaImage", "Home"); }
                               
                                    @ViewBag.FullName<br />
                                    @x.LabelWall.Date.Value.ToLongDateString()
                                <br />
                                @x.LabelWall.Text
                            
                        </span>
                   }
               } 
</div>

В голове вертится пока один возможный вариант ( на основе моей разметки). Назначаем внутреней table id + 1 за каждое появление или проходим по всем элементам ( записям ( n- количество таблиц)) и смотрим их расположение http://javascript.ru/ui/offset сравниваем с экраном пользовательского браузера

<script type="text/javascript">
    height = $(window).height();
    img.style = "height: " + height + "px";
    imga.style = "height: " + height + "px";  
</script>

и если не значение таблицы больше чем высота экарна браузера, то что то сделать, хз что можно сделать.

А все блоки разных размеров?

Пока да и было бы красивее если все разных размеров( а то если написано пару слов и занимать большой контейнер - как то неочень). В БД я ставил размер 1000 символов для @x.LabelWall.Text ( основной текст), если учитывать это, то можно сказать точно какой размер будет.