Съезжает колонка.

[Maskca]

Здравствуйте, есть 2 колонки сделаны способом:

<ul>
<li>

</li>
<li>

</li>
</ul>

К <li> применен стиль float:left и так получилось 2 колонки, но когда в одной <li>текст</li> левой колонки больше текста чем в правой, то почему то нижний <li>текст</li> съезжает не в низ, а в право выталкивая при этом стоящею справа <li>текст</li> в низ. Как это можно исправить, чтобы при большем количестве текста колонки съезжали не вправо, а в низ, как это должно быть?

Edited April 14, 2011 by Maskca

[Gaspode]

Мммм... ширину задать?

[psywalker]

Покажи скрины, как нужно и как есть щас.

[Maskca]

Есть так:

Смотреть

Нужно так:

Смотреть

Edited April 14, 2011 by Maskca

[psywalker]

Ограничь ширину пунктов

[Maskca]

Тоисть ширину <li>?

Если да, то она задана

[psywalker]

Тоисть ширину <li>?

Если да, то она задана

А дай ссылку на тестовую страницу с примером. И перечисли браузеры косячные.

[Maskca]

Сайт на денвере, косит на всех браузерах.

[psywalker]

Сайт на денвере, косит на всех браузерах.

1. Постарайся перенести на хост.

2. А пока попробуй li {overflow: hidden; width: чёткая ширина}

3. ul {overflow: hidden; width: чёткая ширина, такая, чтобы можно было вместить легко два пункта li}

[Maskca]

может код поможет:

<div id="cat">

<ul>

<li>

<div class="p-img"><a href="#" title="{title}">{short-story}</a></div>

<div class="p-title"><a href="#" title="{title}">{title}</a></div>

</li>

</ul>

</div>

[psywalker]

может код поможет:

<div id="cat">

<ul>

<li>

<div class="p-img"><a href="#" title="{title}">{short-story}</a></div>

<div class="p-title"><a href="#" title="{title}">{title}</a></div>

</li>

</ul>

</div>

Так, стоять)) А это что ещё за...?

<div class="p-img"><a href="#" title="{title}">{short-story}</a></div>
<div class="p-title"><a href="#" title="{title}">{title}</a></div>

Это неверный подход к делу. Замути два ЛИ в строке!

[Maskca]

Если 2 пункта то все хорошо, а как я на движке сделаю чтобы в одном ul по два li выводилось, поэтому li как бы в цикле выводятся.

Здесь:

<div id="cat">
<ul>
<li>
<div class="p-img"><a href="#" title="{title}">{short-story}</a></div>
<div class="p-title"><a href="#" title="{title}">{title}</a></div>

</li>
</ul>
</div> 

В цикле выводятся:

<li>
<div class="p-img"><a href="#" title="{title}">{short-story}</a></div>
<div class="p-title"><a href="#" title="{title}">{title}</a></div>

</li>

[psywalker]

Тогда ширину нужно прописывать вложенным дивам. И флоаты тоже им.

[Maskca]

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

[psywalker]

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

Поставь дивам overflow: hidden; и вообще всему чему можно поставь!

[Maskca]

Не идет и все.

Что я сделал:

<div class="cat">

<div class="p-img"><a href="#" title="{title}">{short-story}</a></div>
<div class="p-title"><a href="#" title="{title}">{title}</a></div>


</div>	

Где: .cat { float:left; width:250px; overflow:hidden; }

.p-img img {padding:3px;background:#fff;border:1px solid #e2da7b; width:213px; height:172px;overflow:hidden;}

.p-title a {font:normal 15px Arial;color:#00899f;overflow:hidden;}

div.p-img { !important;min-height:10px; height:auto;overflow:hidden;}

Edited April 14, 2011 by Maskca

[psywalker]

Так ты вот этому то блоку нормальную ширину прописывай и флоат убери.

.cat { float:left; width:250px; overflow:hidden; }

[Maskca]

так если я флоат уберу, как оно будет в колонки формироваться?

[psywalker]

У меня вот так пашет, делай по такому же принципу

<ul style="width: 500px;"><li style="float: left; width: 100%;"><div style="float: left; width: 240px;">kdsjfsdjf</div><div style="float: left; width: 240px;">kdsjfsdjf</div></li></ul>