Align div left and right

Question

There are two tags in the codes below <div>. I want to align one to the <div>left and the other to the right, with the same height and width. Please help me do this.

<div id="imgShow">
    <panel>
        <img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
        <div id="ScrollImg" style="position:relative;width:900px; height:330px;overflow: scroll; top: 3px; left: -1px;left:auto">
            <canvas id = "drawing" height="1500" width="1200" >  
                <p>Canvas not supported</p>
            </canvas>
        </div>
    </panel>
</div>
<div id="divComplete" style="position:relative;width:100px; height:330px;overflow: scroll; top: 3px; right: -1px;right:auto"></div>

Answer 1

Try entering the code:

Demo

<div id="imgShow" style="width:50%; height:330px;overflow: scroll;float:left;">
    <panel>
        <img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
        <div id="ScrollImg">
            <canvas id = "drawing" height="1500" width="1200" >  
                <p>Canvas not supported</p>
            </canvas>
        </div>
    </panel>
</div>
<div id="divComplete" style="width:50%; height:330px;overflow: scroll;">Canvas not supported</div>

Answer 2

Set floats for each div using CSS: example

.left { width:50%; float:left; height:200px; background:red;}
.right { width:50%; float: right; height:200px; background: blue;}

Answer 3

float:

<style>

#imgShow, #divComplete{
    float:left;
    width:50%;
}

</style>

, css .

PS: CSS, , CSS head

Answer 4

You can use twitter bootstrap css to style your divs. Just add class="col-xs-6"to each div. Remember that class="col-xs-12"is the full width that a div can take depending on the width of the parent container. Using -xs- instead of -md- compresses the div when resizing instead of knocking them down. If you want the fields to just add, change them to col-xs-5, then add a div col-xs-2. Also good practice is to use parent divs with container-fluidand rowclasses