Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make two divs equal in height lying side by side using html and css?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 623
    Comment on it

    Hello Readers , this is a small blog on how to make two columns of equal height regardless of content inside the columns. First, we will write the HTML to make two columns lying side by side having same width. The following code is written to make two columns.

    Copy this code in your HTML page.

    <!doctype html>
    
    <head>
    
    <title>Columns of equal height</title>
    
    </head>
    
    
    <body>
    
    
    <div class="row">
        <div class="col1">
            <div class="inside-div">
                <h2>Column 1</h2>
                <p>How to make two divs equal in height lying side by side irrespective of content</p>            
            </div>
        </div>
        <div class="col2">
            <div class="inside-div">
                <h2>Column 2</h2>
    
               <p>Less Content</p>
            </div>
        </div>
    </div>
    
    
    </body>
    
    <html>

     

     

    Next, we will write the CSS. Copy the below-written code in your CSS file.

    .row {
        margin-bottom: 0;
        margin-top: 12px;
        width: 100%;
        display: table;
    }
    .col1 {
        width: 49%;
        margin-right: 1%;
        display: table-cell;
        border: 1px solid #CCC;
    }
    .col2 {
        width: 49%;
        margin-left: 1%;
        display: table-cell;
        border: 1px solid #CCC;
    }
    .inside-div {
        padding-left: 12px;
        padding-right: 12px;   
        padding-bottom: 12px;
    }

     

 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: