locked
Side-by-side divs RRS feed

  • Question

  • User1510859543 posted

    I want to have 3 separate ListViews on my aspx page and want them to be side-by-side using 30%, 35% and 35% of the width of the div so the page shows as below.  How can I do this with CSS?

    ListView1       ListView2       ListView3

    rows               rows              rows

    Tuesday, May 22, 2018 9:20 PM

Answers

  • User1724605321 posted

    Hi dlchase,

    Please refer to below code sample :

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        box-sizing: border-box;
    }
    
    /* Create three equal columns that floats next to each other */
    .column {
        float: left;  
        padding: 10px;
        height: 300px; /* Should be removed. Only for demonstration */
    }
    
    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
        .column {
            width: 100%;
        }
    }
    </style>
    </head>
    <body>
    
    <h2>Responsive Three Column Layout</h2>
    <p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
    
    <div class="row">
      <div class="column" style="background-color:#aaa; width:30%">
        <h2>Div 1</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#bbb;width:35%">
        <h2>Div 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ccc;width:35%">
        <h2>Div 3</h2>
        <p>Some text..</p>
      </div>
    </div>
    
    </body>
    </html>
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 23, 2018 2:47 AM

All replies

  • User1724605321 posted

    Hi dlchase,

    Please refer to below code sample :

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        box-sizing: border-box;
    }
    
    /* Create three equal columns that floats next to each other */
    .column {
        float: left;  
        padding: 10px;
        height: 300px; /* Should be removed. Only for demonstration */
    }
    
    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
        .column {
            width: 100%;
        }
    }
    </style>
    </head>
    <body>
    
    <h2>Responsive Three Column Layout</h2>
    <p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
    
    <div class="row">
      <div class="column" style="background-color:#aaa; width:30%">
        <h2>Div 1</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#bbb;width:35%">
        <h2>Div 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ccc;width:35%">
        <h2>Div 3</h2>
        <p>Some text..</p>
      </div>
    </div>
    
    </body>
    </html>
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 23, 2018 2:47 AM
  • User-369506445 posted

    hi

    you can define your css below like :

     <style>
            ul{
                float: left;
                width:30%; // all width of lists get 30% 
             }
            ul:first-of-type{
                width:25%; //// only First list get 25%
            }
        </style>

    and your complete code

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            ul{
                float: left;
                width:30%;
             }
            ul:first-of-type{
                width:25%;
            }
        </style>
    </head>
    <body>
        <ul style="background-color:blue">
            <li>row 1</li>
            <li>row 2</li>
        </ul>
    
        <ul style="background-color:aquamarine">
            <li>row 1</li>
            <li>row 2</li>
        </ul>
    
        <ul style="background-color:coral">
            <li>row 1</li>
            <li>row 2</li>
        </ul>
    </body>
    </html>

    also you can see demo in below link:

    Fiddle

    Wednesday, May 23, 2018 5:34 AM