how to display div elements horizontally

Question

I want to display mysql result horizontally in a div, div is set on overflow-x : scroll but it is not working, result is coming horizontally but it goes on the next line as the page width ends.

instead of the next line i want entire thing in single line

here is the code

PHP/Html code :

      <p1>Popular</p1><div class="posterbar">
      <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "movie_db2";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT `poster`, `movie`FROM `movie_db2`"   ;
$result = $conn->query($sql);

if ($result->num_rows > 0) {

     // output data of each row
     while($row = $result->fetch_assoc()) 
        echo "<div class=\"imgc\"><a href=".$row["movie"]."><img src =" . $row["poster"]. "></a></div>";


} else {
     echo "0 results";
}

$conn->close();
?> 
   </div>

Css :

.posterbar{
    position : relative;
    overflow-x: scroll;
    top : 400px;
    width: 85%;
    height: 211px;
    float: right;
    z-index: 45;
    background: #D8D8D8;
    border: 1px solid #979797;        
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.imgc {
    border: 1px solid white;
    display: inline-flex;
    max-height: 190px;
    max-width: 140px;       
}

I don't think PHP and MySQL has any relation with your problem. — al'ein, Oct 08 '15 at 13:50
http://stackoverflow.com/questions/6497373/make-content-horizontally-scroll-inside-a-div — Dragod83, Oct 08 '15 at 14:08

score 1 · Accepted Answer · edited Oct 08 '15 at 14:12

Use white-space: nowrap; to your container like this:

.posterbar {
    position: relative;
    overflow: auto;
    top: 0px;
    width: 85%;
    height: 180px;
    white-space: nowrap;
    z-index: 45;
    background: #D8D8D8;
    border: 1px solid #979797;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.imgc {
    width: 140px;
    height: 140px;
    border: 1px solid white;
    display: inline-block;
}

<div class="posterbar">
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>             
    <div class="imgc">
        <a href="#"><img src=""></a>
    </div>
</div>

What nowrap does is:

Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered

You can read more about white-space rule here

score 0 · Answer 2 · answered Oct 08 '15 at 14:17

I have done an example on codepen chek it out. codepen here

Css:

.posterbar{
    position : relative;
    overflow-x: scroll;
    overflow-y: hidden;
    top : 100px;
    width: 85%;
    left: calc(100% - 85% );
    height: 160px;
    z-index: 45;
    background: #D8D8D8;
    border: 1px solid #979797;
    white-space: nowrap;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.imgc {
    border: 1px solid white;
    display: inline-flex;
    max-height: 190px;
    max-width: 140px;
  background: red;
  width: 190px;
  height: 140px;
}

Html:

 <div class="posterbar">
    <div class="imgc">
       <img src=""/>
     </div>
</div>

how to display div elements horizontally

2 Answers2