SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issue with alignment using "float" property

    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.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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:

    Code HTML4Strict:
    <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
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    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.

    Quote Originally Posted by chris.upjohn View Post
    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.

    Quote Originally Posted by chris.upjohn View Post
    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:

    Code:
    <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:

    Code:
    /* 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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •