Problems with IE7 keeping two buttons in a same line

Question

Hi all, I have a problem with IE7.

I'm trying to put 2 buttons in the same line.. but its not working only for IE7 in all other browsers it works as it should( didn't check IE6, will no check). Here is a picture so you know what I mean

This black border you see is just something I put so I can see how long/tall is my div. Which css style should buttons have in order to be in the same line. Thank you

UPDATE-> HERE IS SOME HTML :

<div style="border:1px solid; width:300px; height:30px; float:left; padding:0;margin:0;text-align:left;">
        <a class="button niceButton"> 
         <div id="first" class="action_button">
          EDIT CATEGORY
         </div> 
        </a>
        <a class="button niceButton"> 
         <div id="action_delete" class="action_button1">
          DELETE RECORDS
         </div> 
        </a>
        </div>

Answer 1

The left one should have float: left; and the right one should have float: right; and it's recommended to place a clear: both; on the element after the div with the buttons.

Example:

<div class="buttons">
    <button class="left">left button</button>
    <button class="right">right button</button>
</div>

with

.buttons {
    width: 300px;
}
.left {
    float: left;
}
.right {
    float: right;
}

Answer 2

Have you tried display: inline; on the buttons?

Edit:

also shouldnt the be inside the div around the text like so:

<div id="first" class="action_button">
<a class="button niceButton">EDIT CATEGORY</a>
</div>

Answer 3

use a table?

without seeing all your css, i can't give a much better suggestion that that.