Есть к примеру 20 блоков <div> размером 300px. Они заполняются в цикле слева направо в выровненый по центру родительский блок <div>.
Задача: сделать родительский блок по ширине заполняемого контента.
Использование для контентных блоков float:left или inline-block - без разницы (а может и ещё как можно).
Чтобы было понятней, приведу пример кода (правильно работает только в Опере!):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<style>
.a {
border:2px solid aqua;
text-align:center;
min-width:1000px;
}
.b {
border:2px solid blue;
display:inline-block;
text-align:left;
}
.b div {
display:inline-block;
border:1px solid red;
}
div {
margin:5px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div style="width:800px;">1</div>
<div style="width:500px;">2</div>
</div>
<div>
</body>
</html>
Размеры поставил разные для наглядности.
На рисунках видно, в Опере всё как надо, а остальные браузеры непонятно зачем растягивают родительский блок, хотя никакого контента там нет, только пустота. Есть предположение, что браузер пытается втиснусть элемент, расширяя родительский блок, затем при неудачной попытке переносит элемент на вторую строку, а родительский блок забывает поставить на место (ужать).
Вобщем нужно так, как в Опере. Если с помощью css такое сделать нельзя, то видимо придётся задействовать скрипты и либо ужимать блок после отрисовки, либо изначально измерять блок, вычислять сколько в него влезет элементов и затем уже заполнять.