...

View Full Version : Floats wrong



Benhurdk
05-01-2009, 06:58 PM
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!





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

ajhauser
05-01-2009, 07:18 PM
If I change the width of your label and it's div like this:



#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?

Benhurdk
05-01-2009, 07:27 PM
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 :)

ajhauser
05-01-2009, 07:57 PM
Is the error in IExplorer?

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

Benhurdk
05-01-2009, 08:05 PM
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

Fisher
05-01-2009, 09:14 PM
A couple of <br /> tags and a clear class applied to your label tag will fix things for you.


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

Benhurdk
05-03-2009, 11:02 AM
Thanks man!

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

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

abduraooft
05-03-2009, 11:09 AM
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 (http://www.alistapart.com/articles/prettyaccessibleforms), though there are some more left.

Fisher
05-03-2009, 12:08 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum