How can i place two divs the next one like this one in the Image.
+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
2010-06-17 11:52:47
+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:
thisMayhem
2010-06-17 11:54:30
Totally up voting this for effort!
Scobal
2010-06-17 12:05:06
that's one of the consequences of free time between jobs !! :P
thisMayhem
2010-06-17 12:14:16
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
2010-06-17 12:16:08