Как ужé говорилось выше, хороший перенос блочных элементов на новую строку может быть достигнут применением строчного блока. Рекомендую для этой цели использовать нижеследующий код строчного блока, вполне испытанный многомесячным применением его
в одном из основных CSS-файлов в «Традиции», русской энциклопедии:
/* {{Строчный блок}}
* http://habrahabr.ru/blogs/css/96152/
* ↑ http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/
* ↑ http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
* ↑ первоисточник
*/
.lineBlock {
border: 0; margin: 0.3em 0.15em; padding: 0;
display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */
display: inline-block;
vertical-align: top;
/* ↓ IE6 & IE7 «hasLayout» voodoo */
zoom: 1;
*display: inline;
/* ↑ IE6 & IE7 starhack ← http://www.ejeliot.com/blog/63 */
}
Как видите, этот код составлен по принципам, обеспечивающим обратную совместимость с Firefox 2 и IE 6 и 7.
Если рамка внешнего блока не будет совершенно прилегать ко границам внутренних строчных блоков, тогда непременно попробуйте
и внешний блок также оформить в качестве строчного блока, то есть и ему назначить класс «lineBlock», описанный вышеприведённым
CSS-кодом.