I’m about to undertake a fairly large data submission part of a website. The idea behind this data submission is to signup and then enter details over a few page process.
My job is to completely style the forms and make them presentable, currently they are bare html with no styling.
I was hoping if anyone had any experience with how to tackle a large amount of forms below is one of the pages;
As you can see I would be having a fieldset, with a width; then one side with the labels at a fixed width? and then the forms with the rest of the width?
I’m just trying to look for a best practice really, it’s also under a timescale. Any help would be appreciated!
I haven’t actually started this yet, the screenshot is just an image. Would this best being a table? or divs? To me, it looks like a table, but I’m not too sure.
Sorry about the bump - I’m interested to know how people would lay this kind of registration form out. I’m wondering if this would be a table? or a set of divs? I have been playing around and I’m not too sure. Simply because of the rows of data with borders on the bottom, Also the fixed width left hand side with the labels.
I wouldn’t use tables for this, because it’s not tabular data. I’ve thrown together a quick example with divs, but it’s a bit of a mess (it’s late here, and I’m tired, so I’ve just thrown together random bits. See what you make of it.)
As you can see, I have 2 columns which each row is wrapped in a container div. On right side we have the div that contains a 1px border which extends to the bottom of the wrapper div that fits flush taken by it’s height.
However, in two of the cases of this screenshot we have the left column with is of a higher height (does that make sense?) thus leaves the right column border short of the left div.
I’ll give you the css.
Wrapper div that contains both left and right divs
My question ultimately, is how do I make it so the right div’s border extends to the bottom of the wrapper div, if the left div is higher than the right div?
I know this sounds stupid, I have no idea how to explain it better!
I’m thinking, would a background image on the container div be the best way to go here? Or just make another css rule and manually apply it to the problem divs? Oooh! The options?!
… or give the floated label holder a right border and a negative right margin of 1px. This will then pull the form elements left border on top so both borders are in the same position and therefore no matter which elements is longest the border will always be there.
I tried your suggestion Ralph, didn’t want to work. So I went with Paul’s suggestion and it’s magical! I had no idea you could do something like that. I would love to understand why it works!
Paul explained it. If you put a border on the facing sides of two elements that sit side by side, no mater which is taller, you’ll have a border between them. T prevent a double width border, though, you pull one of them over by 1px, so that the borders sit on top of each other.