Issue with alignment using "float" property

[Goalie35]

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:

<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.

[chris.upjohn]

So i don't confuse you I'll explain the fix first which is simply just a CSS property called clear, this property allows you to clear a child element that comes after siblings before it so it doesn't float on the same level. See the below example which uses your code:

<div style="clear: both; float: left;">
    Normal content here...
</div>

Now for the problems your code has:

1. Your currently using inline styles which is bad practice, any styles you use should be contained within a CSS file to keep things tidy and easy to update
2. Instead of wrapping your <input> elements within a <span> use a <p> element as they are more semantic and common in forms
3. Using markup such as "&nbsp;<br />" isn't needed as your just leaving an empty space before the line break
4. Your <a> elements have been opened but haven't been closed, make sure to close all elements in your markup

[deathshadow60]

Your currently using inline styles which is bad practice, any styles you use should be contained within a CSS file to keep things tidy and easy to update

Agreed.

Instead of wrapping your <input> elements within a <span> use a <p> element as they are more semantic and common in forms

NO!!! -- they are not paragraphs!. What should be done there is the use of LABELS for the inputs and simple line breaks. Then they'll have the CORRECT semantic meanings. See my signature.

Your <a> elements have been opened but haven't been closed, make sure to close all elements in your markup

been seeing that in a lot of code lately...

There is little if any reason for the markup for said layout to be much more than:

<fieldset>
	<img src="images/whatever.png" alt="image here" />
	<label for="loginUsername">Username:</label>
	<input type="text" id="loginUsername" name="username" /><br />
	<label for="loginPassword">Password:</label>
	<input type="text" id="loginPassword" name="password" /><br />
	<input type="submit" value="Log In" class="submit" />
	<div>
		<a href='ForgotPassword.aspx'>Forgot Password?</a><br />
		<a href='Register.aspx'>Register</a>
	</div>
</fieldset>

assuming that's inside a form with the ID "loginForm" the CSS would go something like this:

/* assumes reset nulling fieldset margins and border are in place */

#loginForm img {
	float:right;
	margin:0 0 1em 1em;
}

#loginForm label {
	display:block;
}

#loginForm input {
	display:block;
}

#loginForm div {
	clear:both;
	padding:1em 0;
}

There's no reason for all those extra pointless tags in there -- semantic markup can generally do the grunt work for you. ESPECIALLY if you have your source order in display order and keep the floats to a minimum as you really only have one thing that NEEDS to float.

FIELDSET and LABEL -- two tags I'm shocked how many developers have never even HEARD of them much less figured out where/how/why to use them; but the same could be said for TH, THEAD, TBODY, LEGEND, CAPTION, etc...