tags:

views:

37

answers:

2

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

alt text

+1  A: 

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

<div id="1" style="float:left;"></div>
<div id="2" style="float:right;"></div>
Scobal
+4  A: 

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:

floating divs

thisMayhem
Totally up voting this for effort!
Scobal
that's one of the consequences of free time between jobs !! :P
thisMayhem
And if these two divs are in a non-floating container, you will have to clear the container to get full browser compatibility...
Bob Fincheimer