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/
Image Text
Div 5
https://coursesweb.net/html/

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Making DIV Contents Scroll Horizontally, with multiple Div`s inside

Last accessed pages

  1. Script Users Register, Login, Online (17360)
  2. Blade Templates - Part 1 (156)
  3. Writing CSS code (2240)
  4. PuzzleImg - Script to Create Image Puzzle Game (4983)
  5. CKEditor Free Image Browse Plugin (7147)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (281)
  2. Register and show online users and visitors (176)
  3. Read Excel file data in PHP - PhpExcelReader (157)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (155)
  5. JavaScript Course - Free lessons (128)