Making DIV Contents Scroll Horizontally, with multiple Div`s inside

The code presented in this page shows you how to make DIV contents scroll horizontally, with multiple Div's inside aligned horizontally.
To create this design, sets these CSS properties to container DIV:
- a fixed width and height.
- white-space: nowrap; to keep the contents on the same line; to not go to a new row.
- overflow-x: auto; - to display the horizontal scroll bar when the contents exceeds container width.
- overflow-y: hidden; - optional, to not display the vertical scroll bar.

And add these CSS properties the children DIV's:
- display: inline-block; - to align the DIV's horizontally.
- white-space: normal; - to anulate the "nowrap" inherited from parent (container) DIV.

Here is an example.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Making DIV Contents Scroll Horizontally, width multiple Div`s inside</title>
<style type="text/css">
#container {
  position: relative;
  height: 9em;
  width: 99%;
  margin: 2px auto;
  background: #abefcd;
  text-align: left;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align:middle;
}
#container div {
  display: inline-block;
  width: 14em;
  height: 6em;
  margin: 0.5em;
  border: 1px solid blue;
  padding: 3px;
  white-space: normal;
  text-align: center;
}
</style>
</head>
<body>

<div id="container">
 <div>Content in Div 1:<br/> Web Development courses</div>
 <div>Div 2<br/>https://coursesweb.net/</div>
 <div>Div 3<br/>https://coursesweb.net/css/</div>
 <div><img src="some_image" width="99" height="36" alt="Image Text" /></div>
 <div>Div 5<br/>https://coursesweb.net/html/</div>
</div>

</body>
</html>

Demo:

Content in Div 1:
Web Development courses

Div 2
https://coursesweb.net/

Div 3
https://coursesweb.net/css/

Div 5
https://coursesweb.net/html/

To have the Div`s inside container aligned perfectly, their content must have the same number of rows.

<<-Center Fixed and Absolute .. -- CSS Trapezoid Shape->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is a block element?

<div>Web Programming and Development</div>

Which CSS code displays the text underlined?

font-style: italic; text-decoration: underline; font-weight: 500;

h2 {
  text-decoration: underline;
}

Click on the JavaScript function that can access other function after a specified time.

insertBefore() setTimeout() querySelector()

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

Click on the instruction that returns the number of items of a multidimensional array in PHP.

count($array) count($array, 1) strlen()

$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6

Last accessed pages

SSEP - Site Search Engine PHP-Ajax ^(11400)
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(137636)
Remove / Get duplicate array values - Reset array keys in PHP ^(13046)
Create simple Website with PHP ^(43835)
Refresh page if window width changes from a device size to other ⁽¹⁷³²⁾

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽³²⁵⁾
Read Excel file data in PHP - PhpExcelReader ⁽¹¹⁹⁾
The Four Agreements ⁽⁹⁷⁾
PHP Unzipper - Extract Zip, Rar Archives ⁽⁹⁴⁾
The Mastery of Love ⁽⁸⁷⁾