Float não funciona propriamente

[XicoXperto]

Boas malta,

Hoje apareço aqui com duvidas em CSS.

A questão é a seguinte.

Tenho dentro de um span varios elementos e faço um "float : right;" no entanto os elementos ficam 1 numa linha e os restantes, na linha inferior, não consigo entender porquê.

http://img585.imageshack.us/img585/122/capturadeecr20120517s23.th.png

Como podem ver pela imagem acima, o input "Valor" não sobe para a primeira linha fazendo com que os outros fiquem a seguir a ele.

Matched CSS Rules
element.style {
}

div#pensions span input.pension,
div#pensions span input.pensionValue,
div#pensions span input.obs,
div#pensions span div.buttonWithIcon,
div#pensions span div.inputTextWithDatePicker,
div#pensions span div.jqTransformSelectWrapper {
float: left;
margin: 0 0 10px 10px;
}

div#pensions span input.pensionValue {
width: 100px;
}

form input[type="password"].untyped,
form input[type="text"].untyped,
form textarea.untyped {
color:
#AAA;
}

form input[type="password"],
form input[type="text"] {
background: url(../images/style/inputs/text/normal_left.png) no-repeat top left,
url(../images/style/inputs/text/normal_right.png) no-repeat top right,
url(../images/style/inputs/text/normal_center.png) repeat-x top;
}

form input[type="password"],
form input[type="text"],
form textarea {
border: none;
outline: none;
clear: both;
font-family: "Arial";
height: 30px;
padding: 0 5px 0 5px;
color:
#666;
}

input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

user agent stylesheetinput,
input[type="password"],
input[type="search"],
isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color:white;
border: 2px inset;
border-image: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}

user agent stylesheetinput,
textarea,
keygen,
select,
button,
isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: -webkit-auto;
}

body {
font-family: "Trebuchet MS";
font-size: 16px;
text-align: left;
color:
#666;
}

para quem pretender ver em funcionamento pode ir a :http://ba.dotslashsource.com/

Obrigado malta, qualquer ideia é bem vinda!

Abraço

[XicoXperto]

Ninguém consegue descobrir o problema?! 😞

[HappyHippyHippo]

form input[type="password"], form input[type="text"], form textarea {
...
clear: both;
...
}

este estilo está a limpar o floats no input entre os teus divs

Edited May 20, 2012 at 07:20 PM by HappyHippyHippo

[XicoXperto]

Thanks!

é mesmo isso! ainda não entendi bem esta cena do "clear : both"