Home/ Questions/Q 8490927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T22:16:07+00:00

Using styles, want to place two divs in my web application side by side,

  • 0

Using styles, want to place two divs in my web application side by side, like in stackoverflow left side portion is there na like that. i tried like 

<div style="width:60%; " >

</div>

  <div style="width:40%; ">    

</div>

but the divs are coming next line to another div, i want the div come side by side with 60 and 40 % width. can you help me

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Whilst I am not keen on the use of floats to align things…you can do this…which splits the screen across two div elements ( a bit like frames )

    <!DOCTYPE html>
<html>
    <head>
        <title>Template</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <style type="text/css">
            html, body
            {
                /* height: 100%; removed as per user comments */ 
            }

            .div1
            {
                background: none repeat scroll 0 0 #FF0000;
                display: inline-block;
                /* height: 100%; removed as per user comments */ 
                width: 60%;
                float: left;
            }

            .div2
            {
                background: none repeat scroll 0 0 #0000FF;
                display: inline-block;
                /* height: 100%; removed as per user comments */ 
                width: 40%;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            I am Div1 and this is my content<br/>
            I am Div1 and this is my content<br/>
            I am Div1 and this is my content<br/>
            I am Div1 and this is my content<br/>
            I am Div1 and this is my content<br/>
        </div>
        <div class="div2">
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
            I am Div2 and this is my content<br/>
        </div>
    </body>
</html>
    • 0