проблема с Ul

[knocc]

Возник вопрос.

есть блок:

<div id="news">
 <ul>
    <li><p>Раз</p></li>
    <li><p>Два</p></li>
    <li><p>Три</p></li>
    <li><p>4</p></li>
</ul>
<br class="clearfloat">
</div>

Вот такие стили для этого блока.

.page #news{

margin: 0 auto;

width: 750px;

padding: 0px;

}

/*.page #news ul{margin: 0; padding: 0; border: #006633 dotted 1px; display: block;}*/

.page #news li{

float:left;

margin: 0px 0px 10px 20px;

width: 350px;

height: 150px;

/*border: dotted 1px #5d9b30;*/

}

Вопрос вот в чем, список получается колонками, но он выпадает из блока <div> и <ul>

Как бороться с этим?

и еще вопрос.

если блоки <li> ди получаются разной высоты, они отображаются не ровно, но если зафиксировать высоту блока, все норм, но мне нужно чтоб высота была разной. Уже всю голову сломал, не получается, мож кто подскажет?

[psywalker]

Возник вопрос.

есть блок:

<div id="news">
 <ul>
    <li><p>Раз</p></li>
    <li><p>Два</p></li>
    <li><p>Три</p></li>
    <li><p>4</p></li>
</ul>
<br class="clearfloat">
</div>

Вот такие стили для этого блока.

.page #news{

margin: 0 auto;

width: 750px;

padding: 0px;

}

/*.page #news ul{margin: 0; padding: 0; border: #006633 dotted 1px; display: block;}*/

.page #news li{

float:left;

margin: 0px 0px 10px 20px;

width: 350px;

height: 150px;

/*border: dotted 1px #5d9b30;*/

}

Вопрос вот в чем, список получается колонками, но он выпадает из блока <div> и <ul>

Как бороться с этим?

и еще вопрос.

если блоки <li> ди получаются разной высоты, они отображаются не ровно, но если зафиксировать высоту блока, все норм, но мне нужно чтоб высота была разной. Уже всю голову сломал, не получается, мож кто подскажет?

1) .page #news {overflow: hidden;}

2) Сделай Дисплей:инлайн-блоками, чтобы учитывать высоту

[knocc]

1) .page #news {overflow: hidden;}

Спасибо, это работает!!!

2) .page #news li{

float:left;

margin: 0px 0px 10px 20px;

width: 350px;

display: inline-block;

}

ваще не помогает

[psywalker]

ваще не помогает

Так ведь и не будет работать, подход не тот. Я тебе говорил про кросс-инлайн блоки.

[knocc]

Спасибо, нашел.

UPD:

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://" >
        </div>
</li>

Edited December 17, 2009 by knocc

[psywalker]

Спасибо, нашел.

http://yandex.ru/yandsearch?text=%D0%BA%D1...10&lr=11079

Молодец!