проблема с 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]

  knocc said:

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

есть блок:

<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]

  psywalker said:

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

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

  psywalker said:

2) .page #news li{

float:left;

margin: 0px 0px 10px 20px;

width: 350px;

display: inline-block;

}

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

[psywalker]

  knocc said:

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

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

[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]

  knocc said:

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

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

Молодец!