блоки внутри overflow:hidden

без лишней лирики
Есть:
<code><head>
<style type="text/css">
#wrap-scroll-box {
	width: 600px;
	overflow: hidden;
}
#scroll-box em { float:left; width:150px; height:150px; display:block}
</style>
</head>

<body>


<div id="wrap-scroll-box">
    <div id="scroll-box">
        <em>блок</em>
        <em>блок</em>
        <em>блок</em>
        <em>блок</em>
        <em>блок</em>
        <em>блок</em>
        <em>блок</em>
        <em>блок</em>

    </div>
</div>
</body></code>


Нужно чтоб контейнер #scroll-box растягивался по ширине а не по высоте
и обрезался #wrap-scroll-box

чтоб не было такого, а все <_em> выстраивались в одну строку растягивая #scroll-box
Курск
P.S. таблицы не применять
P.P.S да я хуёво объясняю ))

9 комментариев

  • аватар vit
  • 0
а чего таблицы не применять? я бы наверное ими делал…
я table-nazi
да и не семантично
в правильно, таблицами делать нельзя. ты забыл указать, поддержка каких браузеров требуется
тогда можешь просто написать содержимое блоков через запятую, текстовый браузер не понимает css 
<!doctype html>
<html>
<head>
<style type="text/css">
#wrap-scroll-box,#scroll-box{
	width: 600px;
	overflow: hidden;height:150px;
}
#scroll-box{width:1000px;}
#scroll-box li{ float:left; width:150px; height:150px; display:block}
</style>
</head>

<body>


<div id="wrap-scroll-box">
    <ul id="scroll-box">
        <li>блок</li>
        <li>блок</li>
        <li>блок</li>
        <li>блок</li>
        <li>блок</li>
        <li>блок</li>
        <li>блок</li>
        <li>блок</li>

    </ul>
</div>
</body>
</html>
коли уж зашла речь о семантике, так это должен быть список 
<!doctype html>
<html>
<head>
<style type="text/css">
#wrap-scroll-box{width: 600px;height:150px;overflow: hidden}
#scroll-box{display:table}
#scroll-box li{display:table-cell}
img{width:150px}
</style>
</head>
<body>
<div id="wrap-scroll-box">
    <ul id="scroll-box">
        <li>блок<img></li>
        <li>блок<img></li>
        <li>блок<img></li>
        <li>блок4<img></li>
        <li>блок5<img></li>
        <li>блок<img></li>
        <li>блок<img></li>
        <li>блок<img></li>
    </ul>
</div>
</body>
</html>

не проверял, но должно работать
Обеденная разминка мозгов дала ещё одно решение
<!doctype html>
<html>
<head>
<style type="text/css">
#scroll-box{width: 600px;height:190px;overflow:auto;white-space: nowrap;padding:0}
#scroll-box li{display:inline-block;width:150px;vertical-align:top;white-space: normal}
img{width:150px;height:50px}
</style>
</head>
<body>
  <ul id="scroll-box">
    <li><img>text ext texttext ext texttext ext texttext ext texttext ext texttext ext text</li>
    <li><img>text ext texttext ext texttext ext texttext ext  texttext ext text</li>
    <li><img>text ext texttext ext texttext ext texttext ext ext text</li>
    <li><img>text ext texttext ext text</li>
    <li><img>text ext exttext ext texttext ext text</li>
    <li><img>text ext texttt ext texttext ext texttext ext texttext ext text</li>
    <li><img>text ext texttext ext texttext ext teext ext texttext ext texttext ext text</li>
  </ul>
</body>
</html>

Чтобы оставлять комментарии, нужно или зарегистрироваться.