show content in div without wrapping - php

Question

I need to create a filmstrip kind of div which contains images in a single line without wrapping over. As a trial I am trying to create a div in which I can have text which does not wrap over. Sadly I am unable to figure out how to do it, I am not very good with CSS... Can anyone help?
So far I have done:
<style>
.filmstrip
{
background-color:silver;
padding:20px;
overflow-x:scroll;
display: inline-block;
}
</style>
<div class='filmstrip'>
This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
</div>
I want "This is a test" to come in a single line. (Like how it is in SO). However in my page, it wraps around...
I am now able to show text without scroll from help in comments section...Im adding original problem statement here about showing images without wrap
I have an array of images inside $images. I want to show these images in single line inside div. I tried following based on comments here:
<style>
.filmstrip
{
background-color:silver;
padding:20px;
overflow:scroll;
white-space: nowrap;
}
</style>
<div class='filmstrip'>
<?php
foreach($images as $image)
{
echo "<div><img src='".$image->thumbnail."'></div>";
}
?>
</div>
But this is still coming as separate lines...

Answer 1

Try like this: Demo
.filmstrip {
width:80%;
border:2px solid #000;
overflow:auto;
white-space:nowrap;
}
.filmstrip img {
margin:20px 10px 0 10px;
width:140px;
height:140px;
}
Updated demo without margin:
.filmstrip {
width:80%;
background-color:silver;
overflow:auto;
white-space:nowrap;
padding:20px;
}
.filmstrip img {
width:140px;
height:140px;
border:1px solid #000;
}

Answer 2

If you want all the text to come in a single line, then you have to add
white-space:nowrap;
To see all the text in a single line you have to add overflow: scroll
According to my knowledge this fiddle will help you.
Code
.filmstrip
{
background-color:silver;
padding:20px;
overflow-x:scroll;
display: inline-block;
width: 600px;
overflow: scroll;
white-space:nowrap;
}
<div class='filmstrip'>
This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
</div>
If you want the images to come in a single line, simply you have to add all the img tags inside the div.
By default is a inline element, so it will align in a same line, adding white-space:no-wrap, you will get all images in a same line without break.
Fiddle for image in single line.

Answer 3

Check this out:
https://jsfiddle.net/0cddc72t/5/
CSS
.filmstrip
{
background-color:silver;
padding:20px;
overflow-x:scroll;
display: inline-block;
width: 600px;
overflow: scroll;
white-space:nowrap;
}
.filmstrip > div {
display: inline-block;
background-color: #333;
}
Is this what you want?