Jason Christopher Jason Christopher - 5 months ago 16
HTML Question

How to use horizontal scroll when you have way many columns

I am trying to properly put the columns in proper place when you have many columns (like 15 columns).

Here is the screenshot for the web page I am doing.

Here is the screenshot of the webpage

As it can be seen, I am trying to do what trello(https://trello.com) does. When you have many coluumns, you will be able to scroll horizontally. But in here, the rest of the columns that do not fit to the page goes down to the page.

Here is the screenshot for trello, for what I want it to do

Screenshot of trello

As it can be seen on screenshot 2, It is able to scroll horizontally, no matter how many columns you have.

Here is the HTML code:

<div id="background">
<div class="row">
<div class="col-sm-2">
<h3>Objectives 1</h3>
//content of cards here
</div>

<div class="col-sm-2">
<h3>Objectives 2</h3>
//content of cards here
</div>

<div class="col-sm-2">
<h3>Objectives 3</h3>
//content of cards here
</div>

<div class="col-sm-2">
<h3>Objectives 4</h3>
//content of cards here
</div>

<div class="col-sm-2">
<h3>Objectives 5</h3>
//content of cards here
</div>

<div class="col-sm-2">
<h3>Objectives 6</h3>
//content of cards here
</div>

<div class="col-sm-2">
<h3>Objectives 7</h3>
//content of cards here
</div>

<div class="col-sm-2">
<h3>Objectives 8</h3>
//content of cards here
</div>

<div class="col-sm-2">
<h3>Objectives 9</h3>
//content of cards here
</div>
</div>
</div>


Here is the CSS code:

#background
{
background-color:#9B59B6;
margin: -19px 0 0 0; //this is needed to remove the white space on top of the page
min-height: 100vh; min-width: 100vw;
overflow:hidden;
}

.col-sm-2
{
display: inline-block;
}


I am doing this on ASP.net MVC 6, it is in "cshtml" format, so I do think it is a bit different from html5.(I am a newbie)

I am new to web programming, how do I do this?

Please help, Thank you.

hsh hsh
Answer

tables are one of the solutions to make page grow horizontally so when your using divs use these classes to simulate table behavior:

#background
{ 
    background-color:#9B59B6;
    margin: -19px 0 0 0; 
    min-height: 100vh; min-width: 100vw;
    overflow:scroll;
    display:table;
}
.row
{ 
    display: table-row;
}
.col-sm-2 
{ 
    display: table-cell;
    padding:10px;
}
    <div id="background">
        <div class="row">
            <div class="col-sm-2">
                <h3>Objectives 1</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 2</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 3</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 4</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 5</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 6</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 7</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 8</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>

            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>
            <div class="col-sm-2">
                <h3>Objectives 9</h3>
                //content of cards here
            </div>

        </div>
    </div>

and you can also check this link its very useful:

How To Create a Horizontally Scrolling Site