Question

Need to get an div with overflow:hidden; not to wrap its children.
I need to add a fixed with to the child element for it to not wrap.

Like:

<div style="overflow:hidden; width:700px;">
<div style="width:2000px;"><img>
<img>
<img>
<img>
<img>
<img>
<img>
</div>
</div>

I dont want to add the width of 2000 there. It should only get as wide as the content.
horizontally.

thank you

Answer 1

You can achieve this with the combination of inline-block & white-space

.parent{
 white-space:nowrap;
}

img{
 display:inline-block;
 *display:inline;/* For IE7*/
 *zoom:1;/* For IE7*/
 vertical-align:top;
}

HTML

<div class="parent">
 <img>
 <img>
 <img>
 <img>
 <img>
 <img>
 <img>
</div>