Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make your divs to display horizontally not Vertically

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 222
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: