problem with template: negative margins on float

i'm having a very strange problem with the wordpress template. i'd like to place 2 divs besides each 开发者_如何学Pythonother like this:

<div style='float:left;'>
    left div
</div>
<div style='float:right'>
    right div
</div>

normally this works as it should - both divs should stick directly to each other - but something in the style.css (which uses css reset) causes the right div to overlap the left div with ~ 5pixels. i searched the whole .css for it but couldn't find out :(( it's just a fact that it must be something with the default css.

anyone knows what is causing this - some fix?

thanks

Do either of your divs have widths? Give them a width, float BOTH left and add margin-right to the first div.

Make sure your width + margin doesn't add up to more than the surrounding div. For example if your surrounding div is 600px your boxes shouldn't be more than width:290px; a margin-left:20px; on the left div.

Also, you can use Firebug or any other web development broswer tool to check to see what styles in your stylesheet/s are affecting your divs.

Float both left or use inline-block. You can also just float the first one left.

I would highly recommend that you (if you don't already have it) download FireFox and install the Web Developer Toolbar plugin. This plugin is GREAT for tracking down problems like this. Under the CSS portion of this toolbar when you're viewing the page with the issue you can select to "View Style Information". Then just click on the divs that are the issue on the page. Off to the left you should see a little window pop up that shows all the styling that is affecting those divs and what css source they are coming from. With CSS if you rely on "bug" fixes to fix things that aren't really bugs then you'll just cause more headache later on in most cases.

I think the problem is probably with parts further on in your code. May I suggest clearing the floats:

Html:

<div class="clear"></div>

CSS:

.clear {
     clear: both;
}

The code you have posted would work fine, but I expect you have more divs or containers or something somewhere which is messing it up.

Total width = margin_width + border_width + padding_width+ width of the box + (the same for the other box).

Make sure you have width defined for both floating device. The best way is to debug the code by hitting F12. You can do it FireFox, IE,Chrome or Safari but usually you have to enable this option yourself.