Hello Readers, this is a small blog on making divs display horizontally not vertically. Here is a very simple and easy code that will make divs to stack horizontally.
To achieve this we will make HTML page and CSS page. First, make an HTML page named index.html and write the below written code.
<!DOCTYPE html>
<head>
<title>
Horizontal displaying divs
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="wrapper">
<h4> Horizontal Scroll bar </h4>
<div class="inner-wrapper"></div>
</div>
<div class="wrapper">
<h4> Horizontal Scroll bar </h4>
<div class="inner-wrapper"></div>
</div>
<div class="wrapper">
<h4> Horizontal Scroll bar </h4>
<div class="inner-wrapper"></div>
</div>
<div class="wrapper">
<h4> Horizontal Scroll bar </h4>
<div class="inner-wrapper"></div>
</div>
<div class="wrapper">
<h4> Horizontal Scroll bar </h4>
<div class="inner-wrapper"></div>
</div>
</div>
</body>
</html>
Next, make a CSS file named style.css and copy below written code in this file.
html, body {margin: 0; padding: 0;}
.main{
width:700px;
height:320px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
box-sizing:border-box;
}
.main .wrapper {
display: inline-block;
vertical-align: middle;
border:1px solid red;
width:180px;
height:300px;
}
.inner-wrapper{
border:1px solid green;
text-align:center;
margin:auto;
width:95%;
height:200px;
}
.wrapper h4 {
text-align:center;
}
Comment:
In this, we made the main class which I gave CSS {white-space: nowrap;} i.e the content inside the class will never wrap, in this class we have wrapper class having CSS {display: inline-block;}, inline-block will display the elements in a line and we can give height and width to elements. Here we took fixed width and height of div having class wrapper which is repeating and displaying horizontally
0 Comment(s)