Up until now, I've always used TABLE tags for all of my alignment but I'm trying to start getting into the habit of using DIV tags & css instead. I'm having a problem however when trying to align a basic login form but I'm not sure why. I want my form to look like this:
good_alignment.jpg

....but instead, it's looking like this:
bad_alignment.jpg


As you can see, the "Log In" button & links are pushed up alongside the username/password textboxes, which I don't want. I want them to be beneath my textboxes. I then want to place an image to the right of my textboxes (represented by the "image here" text). Here's my code:
Code:
<div style="text-align: left;">
        <span style="float:left;">
            Username:
            <br/>
            <input type="text"/>
            <br/>
            Password:
            <br/>
            <input type="text"/>
        </span>
        <span style="float:right;padding-left:10px;">
            Image Here
        </span>
    </div>
    <br/>
    <div style="float:left;">
        <input type="button" value="Log In"/><br />
                &nbsp;<br />
                &nbsp;<br />
                &nbsp;<br />
                <a href='ForgotPassword.aspx'>Forgot Password?<br />
                <a href='Register.aspx'>Register<br />
                <br />
                &nbsp;
            </div>
        </div>
How can I move the login button and forgot password/register links beneath the textboxes but still keep my "Image here" section to the right of the textboxes?

Thanks.