How To Place Two Divs To The Next One

How can I place two divs the next one like this one in the Image.

Solution 1:

All you need to do is float both divs to the left and apply the needed styles to achieve the one in the image (I just did something similar, the only thing that matches exactly are the colours). If you float one to each side you will not control the separation of those if the window size changes unless they're inside a container, that's why I like to float both to the same side and select a margin. This is just personal preferences not implying it's better that any other way of doing it.

<style>
.floatOne{
     float:left;
     margin-right:10px;
     background-color:#ff6464;
     height:300px;
     width:80px;
     }

.floatTwo{
     float:left;
     margin-right:10px;
     background-color:#6485ff;
     height:300px;
     width:200px;
     }
</style>

<div class='floatOne'>Some text</div>
<div class='floatTwo'>Some text</div>

Here's the output from my code:

Solution 2:

Float div#1 left and float div#2 right:

<div id="1" style="float:left;"></div>
<div id="2" style="float:right;"></div>