getting fieldset label to line up 1

[1DMF]

I'm having a mare trying to get a fieldset label to line up.

I want to have two fields and labels on the same line, however I have found I cannot get the label width set unless I apply float:left to them, otherwise any width attribute seems to be ignored.

BUT , if you apply float:left to the label then they don't stay side by side any more and each label seems to start on a new line, even though then the input field is still on the line above it seems just the label starts a new line?

this is not how float would normally work, why is it doing this to the label and why can I not apply a width to the label without applying a float?

thanks,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[TheCandyman]

i ways use this on my fields:

<input type="text" name="T1" style="width: 130;>

But we really need to see some code so we can help fix it.

 

[BillyRayPreachersSon]

Labels are inline elements, which is why you need to float them to be able to style them as you would a block-level element.

Floating should work no problem at all - take a look at our contact us page for an example:

http://www.coedit.co.uk/contact/

I'd now consider that method of clearing to be out-dated by the "clearfix" solution posted on P.I.E... but it still works fine in many browsers.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

I can't see the difference apart from obviously your radio buttons float nicely.

You do seem to have a load of <div>'s which i want to avoid if possible , less tags the better you lot have taught me, here is a test file,

https://cwcs16.cwcs.co.uk/~homeuk/mortgage_loan_completion.html

you will see that the input's sit on the line together correctly, but the label 'AR No.' refuses even though there is more than enough room for it.

why?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

It is simple. Your inputs are not floated, your labels are. That means that label will be floating at the lowest point of the previous non floated element or text (inputs being inline elements will be treated similar to text in this scenario). Now, first line, no problems. Label floated to the left, next to it a large input box. Second line, similar. Floating to the left begins at the bottom of the last element or text (that being the company input box). Similar with the textarea. Now for the last two boxes. You have a floated to the left label. That works. Then an input box. Then another floated label, which will position itself at the bottom of the input box -- exactly where it is. The next input box, being inline, will simply tuck in next to the previous input box.

As you can see, the logic is quite simple, although it works against you. I suggest you float both labels and input boxes (textareas, selects) and work from there. There are multiple ways of how to deal with clears. Possibly best option is to put it all in a list and use list items to clear the floats. I am usually lazy and just use horizontal rules. It seems to be the least intrusive semantically.

 

[1DMF]

well I added float to the inputs and that's just made things worse?

so now what?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

Nope cannot work it out!

Ok part of my problem was using <br />'s , i've now removed them, however....

Each filedset the first label/input will not line up they seem to push down to the next line and I do not for the life of me understand why?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Read my comment again and think about it. Floated items will always be below the lowest non floated item. That would include [tt]&nbsp;[/tt]. So, what happens is that all your non-breaking spaces position themselves after the first label and push the first floated input box down. Because they represent the lowest point and lower than the spaces is the next line.

Do yourself a favour and never use non-breaking spaces for styling. There're margins and paddings that work much better.

 

[1DMF]

wow - thanks Vragabond, i'd never have worked that out!

Sometimes you do things without realising (old habits die hard!)

I didn't even see the &nbsp; so used to them being in code you kinda turn them into whitespace in your head!

again thank you so much and a very merry christmas [santa2]





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.