Place Items in Scroll

Question

Hello! I’m trying to create a horizontal scroll with certain items. But it breaks down instead of continuing to the side. I want to do a scroll effect to show more content next door.

.container {
    width: 1200px;
    margin: auto;
}

.conteudo {
    height: 435px;
    border-radius: 5px;
    box-shadow: 2px 1px 15px #888888;
    margin-top: 30px;
    margin-bottom: 30px;
}

.novos-titulos {
    font-family: "Trebuchet MS";
    background-color: #ffffff;
    width: 200px;
    text-align: center;
    border-radius: 5px;
    color: black;
    float: left;
    margin-left: 30px;
    margin-top: 15px;
    box-shadow: 2px 1px 10px #888888;
}

<div class="container">
<div class="conteudo">

                <h2>Novos Títulos</h2>

                <a href="#"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
                <div class="clearfix"></div>


                <?php

                    include_once 'conexao.php';

                    $sql = "select * from perfil ORDER BY idperfil DESC LIMIT 7";

                    $result = mysqli_query($con, $sql);

                    while ($row = mysqli_fetch_array($result)){

                ?>

                <article class="novos-titulos">

<h3><a href="perfil.php?idperfil=<?php echo $row["idperfil"];?>"><?php echo mb_strimwidth($row["titulo"], 0, 20, "..." ); ?></a></h3>

                    <a href="perfil.php?idperfil=<?php echo $row["idperfil"];?>"><img src="img/<?php echo $row["capa"]; ?>" alt=""></a>
                    <span>Total: <?php echo $row["episodios"]; ?></span>

                </article>

  <?php } mysqli_close($con);?>


</div>
</div>

Answer 1

It is impossible to use your available code so I created a simple example for you to understand.

The problem you are having can be easily solved as style white-space: nowrap;, Exactly what he does is to tell the browser that that particular div NEVER will have line break. Then we add the overflow options.

Axle X of the div:

overflow-x: scroll;

We are saying that everything that 'overflows' horizontally the div will be displayed in scroll form.

Axle Y of the div:

overflow-y: hidden;

We are saying that anything that 'overflows' vertically the div will not be displayed. You don’t have to worry about content not being displayed. with the nowrap even the y-axis will never be altered.

.quad{
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid;
  margin-top: 20px;
}

.scroll{
  padding: 5px;
  border: 1px solid #ccc;
  width: 30%;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 150px;
  white-space: nowrap;
}

<div class='scroll'>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
</div>