выровнять изображение в блоке

[eleonore]

Подскажите,почему у меня картинка в нижнем блоке съезжает вниз?Вот код:

<section class="recent_news">

<article>

<img src="images/05.png" alt="pic" class="pic">

<div class="text">

<time>05.12.11</time>

<p><a href="#">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</a></p>

</div>

</article>

<article>

<img src="images/04.png" alt="pic" class="pic">

<div class="text">

<time>04.27.11</time>

<p><a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 2000 years old.</a></p>

</div>

</article>

<article>

<img src="images/03.png" alt="pic" class="pic">

<div class="text">

<time>04.20.11</time>

<p><a href="3">Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</a></p>

</div>

</article>

<p><a href="#" class="all_news">All events and news</a></p>

</section>

css:

.recent_news article{

background:#f8fdfe;

color:#426c93;

margin-bottom:30px;

padding:15px 10px;

-moz-box-shadow:0px 15px 15px -10px #8f9498;

-webkit-box-shadow:0px 15px 15px -10px #8f9498;

box-shadow:0px 15px 15px -10px #8f9498;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

}

.recent_news article a{

color:#426c93;

}

time{

color:#273e53;

font-size:11pt;

}

img.pic{

-moz-box-shadow:0px 15px 15px -10px #8f9498;

-webkit-box-shadow:0px 15px 15px -10px #8f9498;

box-shadow:0px 15px 15px -10px #8f9498;

float:left;

}

.text{

margin-left:175px;

}

[Kray Storm]

Подскажите,почему

Потому что везде три строки текста, а в последнем блоке - две. Потому что все там держится на нижних отступах. И потому что блочные элементы игнорируют плавающие (!).

[eleonore]

Подскажите,почему

Потому что везде три строки текста, а в последнем блоке - две. Потому что все там держится на нижних отступах. И потому что блочные элементы игнорируют плавающие (!).

То что разное кол-во строк я знаю.Как сделать так,чтобы высота section зависела от высоты контента.Ведь это естественно,чтобы материал был разной высоты.Блок section ведь должен тянуться в высоту в зависимости от содержимого,почему этого не происходит?Я не задавала высоту конкретно.Где моя ошибка?

[Kray Storm]

По идее нужно <article> задать overflow:hidden, например. Тогда он начнет учитывать float-ы.

Ошибка в неполном понимании особенностей плавающих элементов.

Как говорится, почувствуй разницу:

1. http://jsfiddle.net/jYuVJ/

2. http://jsfiddle.net/jYuVJ/1/

3. http://jsfiddle.net/jYuVJ/2/

Edited April 27, 2013 by Kray Storm

[eleonore]

По идее нужно <article> задать overflow:hidden, например. Тогда он начнет учитывать float-ы.

Ошибка в неполном понимании особенностей плавающих элементов.

Как говорится, почувствуй разницу:

1. http://jsfiddle.net/jYuVJ/

2. http://jsfiddle.net/jYuVJ/1/

3. http://jsfiddle.net/jYuVJ/2/

Теперь я поняла,да,спасибо за помощь!Я что-то этот нюанс упустила вообще...)