CODEWITHSUNDEEP
phphtmlcss
Undefined Variable
Undefined Variable

Reputation: 4267

show content in div without wrapping

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...

Upvotes: 0

Views: 748

Answers (3)

sasi
sasi

Reputation: 534

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.

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

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;
}

Upvotes: 1

Muzammil Versiani
Muzammil Versiani

Reputation: 191

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?

Upvotes: 0

Related Questions