Placing two divs at same horizontal level

css, html

Solution

You can achieve this using the `float` property:

<style type="text/css">
    div.container {
        margin: 15px;   
    }
    div.left, div.right {
        float: left;
        padding: 10px;    
    }
    div.left {
        background-color:orange;    
    }
    div.right {
        background-color: yellow;    
    }
</style>

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

See this jsFiddle for a demonstration. Here's the output:

Problem

I need to put two div elements at the same horizontal level. Doing the way I have done makes the second one get displayed under the first. I want to place them in a way that they cross over each other while transition. Edit 1- Here when the button is pressed to swap their classes, divs move up and down. ``` #aaidi,#aaidi3 { -webkit-transition: margin-left 1s ease-in-out; -moz-transition: margin-left 1s ease-in-out; -o-transition: margin-left 1s ease-in-out; transition: margin-left 1s ease-in-out; } .left { margin-left: 45%; border: 1px solid green ; width: 20px; height: 4px; background: #FF0000; } // similar for right with margin-left:55% ...... <tr> <td colspan=3> <div id="aaidi" class="left"> </div> <div id="aaidi3" class="right"> </div> </td> </tr> // after this there is a button pressing whom changes the class of both divs. ```

Original source