Css Course

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 type of <input> creates input fields that should contain a numeric value?
type="text" type="number" type="date"
<input type="number" name="points" min="5" max="80" />
Which CSS property allows to change the transparency of an element?
font-style opacity color
#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}
Click on the function that formats a number to specified number of characters.
toPrecision() exp() toFixed()
var num = 12.34567;
alert( num.toPrecision(3) );       // 12.3
Which function randomizes the order of the elements into an array?
natsort() shuffle() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
Making DIV Contents Scroll Horizontally, with multiple Div`s inside

Last accessed pages

  1. Simple Admin Login PHP Script (11031)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142972)
  3. Ajax click Tracking - Monitor clicks on html elements (2238)
  4. For and Foreach Loops (1866)
  5. $_GET, $_POST and $_REQUEST Variables (33900)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (205)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (19)
  3. The Mastery of Love (19)
  4. CSS cursor property - Custom Cursors (18)
  5. Read Excel file data in PHP - PhpExcelReader (15)