Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Floats wrong

  1. #1
    New Coder
    Join Date
    Feb 2009
    Location
    Denmark
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Floats wrong

    Hi

    I need a little help with some floating elements in css. I have found this code for form design on the web, but when the text in <span class="small"> exceeds 140px the line breaks, which is okay, but then the next label gets placed all weird.

    If you could help me finding out what to do to keep the label on the left and the <input> on the right regardless of the length of the small text i would really appreciate it!

    Code:
    
    <html>
    <head>
    <style type="text/css">
    
    body{
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    p, h1, form, button{border:0; margin:0; padding:0;}
    .spacer{clear:both; height:1px;}
    /* ----------- My Form ----------- */
    .myform{
    margin:0 auto;
    width:400px;
    padding:14px;
    }
    
    
    /* ----------- stylized ----------- */
    #stylized{
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
    }
    #stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
    }
    #stylized p{
    font-size:11px;
    color:#666666;
    margin-bottom:20px;
    border-bottom:solid 1px #b7ddf2;
    padding-bottom:10px;
    }
    #stylized label{
    display:block;
    font-weight:bold;
    text-align:right;
    width:140px;
    float:left;
    }
    #stylized .small{
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:140px;
    }
    #stylized input{
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:2px 0 20px 10px;
    }
    #stylized button{
    clear:both;
    margin-left:150px;
    width:125px;
    height:31px;
    background:#666666 url(img/button.png) no-repeat;
    text-align:center;
    line-height:31px;
    color:#FFFFFF;
    font-size:11px;
    font-weight:bold;
    }
    
    </style>
    
    </head>
    
    <body>
    <div id="stylized" class="myform">
    <form id="form" name="form" method="post" action="index.html">
    <h1>Sign-up form</h1>
    <p>This is the basic look of my form without table</p>
    
    <label>Problem
    <span class="small">Vælg 123456789 123456789</span>
    </label>
    <input type="text" name="name" id="name" />
    
    <label>Email
    <span class="small">Add a valid address</span>
    </label>
    <input type="text" name="email" id="email" />
    
    <label>Password
    <span class="small">Min. size 6 chars</span>
    </label>
    <input type="text" name="password" id="password" />
    
    <button type="submit">Sign-up</button>
    <div class="spacer"></div>
    
    </form>
    </div>
    
    </body>
    
    </html>

  • #2
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    If I change the width of your label and it's div like this:

    Code:
    #stylized label{
    display:block;
    font-weight:bold;
    text-align:right;
    width:160px;
    float:left;
    }
    #stylized .small{
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:160px;
    }
    I'm not getting any display errors.

    Is that all you're trying to do?

  • #3
    New Coder
    Join Date
    Feb 2009
    Location
    Denmark
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the reply!

    But it's not exactly what I'm looking for. If i type in a text in the small text that's longer than the width it breaks the text into more lines. I don't mind that it's on more lines, but when it is, it displays the next labels wrong.

    So with the same width and more lines i want it to display correctly

  • #4
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    Is the error in IExplorer?

    Would you be better off using a table for this form instead of floated divs?

  • #5
    New Coder
    Join Date
    Feb 2009
    Location
    Denmark
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Yeah the error is in IE6. I'll try looking at a table louyot instead unless somebody's got a way to sort this out

  • #6
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    A couple of <br /> tags and a clear class applied to your label tag will fix things for you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    }
    p, h1, form, button {
    	border:0;
    	margin:0;
    	padding:0;
    }
    .spacer {
    	clear:both;
    	height:1px;
    }
    /* ----------- My Form ----------- */
    .myform {
    	margin:0 auto;
    	width:400px;
    	padding:14px;
    }
    /* ----------- stylized ----------- */
    #stylized {
    	border:solid 2px #b7ddf2;
    	background:#ebf4fb;
    }
    #stylized h1 {
    	font-size:14px;
    	font-weight:bold;
    	margin-bottom:8px;
    }
    #stylized p {
    	font-size:11px;
    	color:#666666;
    	margin-bottom:20px;
    	border-bottom:solid 1px #b7ddf2;
    	padding-bottom:10px;
    }
    #stylized label {
    	display:block;
    	font-weight:bold;
    	text-align:right;
    	width:140px;
    	float:left;
    	clear:both;
    }
    #stylized .small {
    	color:#666666;
    	display:block;
    	font-size:11px;
    	font-weight:normal;
    	text-align:right;
    	width:140px;
    }
    #stylized input {
    	float:left;
    	font-size:12px;
    	padding:4px 2px;
    	border:solid 1px #aacfe4;
    	width:200px;
    	margin:2px 0 20px 10px;
    }
    #stylized button {
    	clear:both;
    	margin-left:150px;
    	width:125px;
    	height:31px;
    	background:#666666 url(img/button.png) no-repeat;
    	text-align:center;
    	line-height:31px;
    	color:#FFFFFF;
    	font-size:11px;
    	font-weight:bold;
    }
    </style>
    </head>
    <body>
    <div id="stylized" class="myform">
      <form id="form" name="form" method="post" action="index.html">
      <fieldset>
        <h1>Sign-up form</h1>
        <p>This is the basic look of my form without table</p>
        <label>Problem <span class="small">This is more than 140px and it wraps properly. Even when it goes to a 3rd line or even a 4th line.</span> </label>
        <input type="text" name="name" id="name" /> <br/>
    
        <label>Email <span class="small">Add a valid address</span> </label>
        <input type="text" name="email" id="email" /> <br/>
    
        <label>Password <span class="small">Min. size 6 chars</span> </label>
        <input type="text" name="password" id="password" /> <br/>
    
        <button type="submit">Sign-up</button>
        <div class="spacer"></div>
        </fieldset>
      </form>
    </div>
    </body>
    </html>

  • Users who have thanked Fisher for this post:

    Benhurdk (05-03-2009)

  • #7
    New Coder
    Join Date
    Feb 2009
    Location
    Denmark
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks man!

    It works as I want it to, with the clear and <br /> tags.

    Is there any specific reason why you put in the fieldset tags?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Benhurdk View Post
    Is there any specific reason why you put in the fieldset tags?
    Yes, Fisher might be trying to give you some tips to make an accessible form, though there are some more left.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Actually, the reason I added the fieldset was because the page won't validate if the form's elements aren't contained in a parent. If you try to validate it, you'll get an error for each of your elements:
    document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
    Of course, the guidance suggested by Abduraooft is a good way to go.


  •  

    Posting Permissions

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