How do i set margins for floating divs? - css

Question

I have these div, one floats left and the other floats right but they are so spaced apart i want them to be a little closer, i tried setting margins but that didn't work. Can anyone help
here is the css
.right{float:right; margin-left:-200px;}
.left{float:left;}
.date{
width:80px;
margin: 50px 90px 0px 200px;
padding: 0px 0px 0px 0px;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
border-bottom: 0px solid #cccccc;
font-family:eurofurence;
font-size:17px;
width:610px;
background:#000;
}

Answer 1

set
margin-right:200;
for .right
or you can use
position and left or right attribute for style like this
.left{
position:relative;
float:left;
left:100px;
}
DEMO

Answer 2

Try this css :
.left{ float:left;}
.right{float:left; margin-left:200px;}

Answer 3

Note that there's a bug in the current specifications for left-/right-floatting elements with their vertical margins: these vertical margins DO NOT collapse into the vertical margins of non-floatting elements just above them, only with those floatting below them.
It is incoherent... And sometimes the behavior of these vertical margins are not the same across browsers (some will collapse normally).
This creates unbalanced vertical alignment of these floatting elements with non-floatting elements just beside them:
<div style="border:1px solid black;margin:10px">Non-floatting above.</div>
<div style="border:1px solid black;margin:10px;float:left">Floatting on the left.</div>
<div style="border:1px solid black;margin:10px;float:right">Floatting on the right.</div>
<div style="border:1px solid black;margin:10px">Non-floatting in the middle.</div>
<div style="border:1px solid black;margin:10px;clear:both">Non-floatting below.</div>
You'll note that the 3 blocks on the middle are not aligned: the floatting blocks on the left and right are unexpectedly positioned 10px below the central non-floatting block...
But then the block below (with "clear:both") may be shifted down (but this clearing will ignore the bottom margins of the floats before, these floatting bottom margins may still participate to the collapse of the top margin for the element below.
So top margins of floats are not working as expected: it's not possible to create a deisgn where floats will adopt a correct top margin, coherent with non-floatting elements designed to be just beside them if these non-floatting elements also need the same margins.
A work around is to encapsulate all blocks in the middle row in a parent blocks with its own vertical margin, and all blocks in in the middle must not have any vertical margin. And then this creates problems if all these floats do not fit on the row, some will "wrap" and won't have any margin!
The only work around is then to encapsulate all central elements inside a parent block with NO margin, not participating to the collapse of vertical margins with contents above or below them, but then all elements in the middle need to set their margin. In that case there's no way to allow the correct collapse of vertical margins of the central row with vertical margins of rows that are just above or below the middle row.
<div style="border:1px solid black;margin:10px">Non-floatting above.</div>
<div style="position:relative">
<div style="border:1px solid black;margin:10px;float:left">Floatting on the left.</div>
<div style="border:1px solid black;margin:10px;float:right">Floatting on the right.</div>
<div style="border:1px solid black;margin:10px">Non-floatting in the middle.</div>
<div style="clear:both"></div>
</div>
<div style="border:1px solid black;margin:10px">Non-floatting below.</div>