Three column webform - best practice for implenation

[cluthz]

Hi there,

After being told off in the NG a few times I'm doing my best to adhere to
standards. I'm reading my CSS definitive guide book which seems great, but
there is a lot of material to get through.

In the short term I need to implement a webform (the user of the form will
enter search criteria for a database and the amount of data will cover three
columns).

I really want to be able to make the interface clear for the users, give
them the ability to customise it by changing style sheets, make it sizeable
in firefox etc. all the things the experts in this group recommend.

Ideally I want to make each of the columns a single div so they can be
positioned freely by me.
All of the divs are contained within a form.
Ideally if I wanted to add another section to the page I could just create a
new div within the form and positioning this section where I like.
I use dreamweaver 2004 MX for layout and my php code. I like it and do not
want to change.

Bearing in mind that I have to do this quite quickly, I am trying to be good
and learn as much as possible, what is a summary of techniques I should use
to control the layout (to out another way, if I'm to learn css subject, what
to concentrate on).
Prior to this group I would have used absolute positioning of each div
(seems to work great and give me maximum flexibility), but I know this is
bad long term.

So in summary, if making a three column webform, what is the best, standards
conforming way to implement this.

Any input welcome, but if too vague to question not clear enough to answer
fair enough, just concentrate on the summary question.

Cheers

 

[brunascle.maps]

Hi there,

After being told off in the NG a few times I'm doing my best to adhere to
standards. I'm reading my CSS definitive guide book which seems great, but
there is a lot of material to get through.

In the short term I need to implement a webform (the user of the form will
enter search criteria for a database and the amount of data will cover three
columns).

I really want to be able to make the interface clear for the users, give
them the ability to customise it by changing style sheets, make it sizeable
in firefox etc. all the things the experts in this group recommend.

Ideally I want to make each of the columns a single div so they can be
positioned freely by me.
All of the divs are contained within a form.
Ideally if I wanted to add another section to the page I could just create a
new div within the form and positioning this section where I like.
I use dreamweaver 2004 MX for layout and my php code. I like it and do not
want to change.

Bearing in mind that I have to do this quite quickly, I am trying to be good
and learn as much as possible, what is a summary of techniques I should use
to control the layout (to out another way, if I'm to learn css subject, what
to concentrate on).
Prior to this group I would have used absolute positioning of each div
(seems to work great and give me maximum flexibility), but I know this is
bad long term.

So in summary, if making a three column webform, what is the best, standards
conforming way to implement this.

Any input welcome, but if too vague to question not clear enough to answer
fair enough, just concentrate on the summary question.

Cheers

i've read that the most standards conforming way is to have 3 divs,
one after the other, and in the CSS give them the values float: left
you even have to put the further-right one float: left, because
otherwise the bottom of it might wrap underneath the column to the
left. IIRC, you're also supposed to manually set the height of each
column in the CSS, but i cant remember why.

this is the way i do it, but personally i think the standards for this
are kind of flawed. it logically doesnt make sense to me to have to
set the furthest-right column to float: left. and also, when you do it
this way, you often have to tell the next element after the columns
that it shouldnt be placed to the right of the furthest-right column.
to do that, you have to add clear: both to the CSS of the next
element. i really dont like that, becase you dont always know what
element is going to come next. and sometimes it forces me to put a <br
style="clear: both" /> right after the columns, which i dont like
either.

 

[Bergamot]

IIRC, you're also supposed to manually set the height of each
column in the CSS, but i cant remember why.

That would be a very unwise thing to do, especially for any block
containing text. Too many times I've seen fixed dimensions set but the
text taking up more space than what was allocated (mostly due to font
size variations), so it spills out of the container. Very ugly, and
often unreadable. Don't do it.

personally i think the standards for this
are kind of flawed. it logically doesnt make sense to me to have to
set the furthest-right column to float: left.

Sounds like you put the cart before the horse. How it looks on screen
doesn't have to correspond to how it is structured, but it *does* have
to be structured logically.

Don't think about the layout first, think about the structure first.
Code it so the document makes sense without any styling at all. Then add
whatever design elements (e.g. added containers and/or class selectors)
that may be needed to achieve the desired layout.

you often have to tell the next element after the columns
that it shouldnt be placed to the right of the furthest-right column.
to do that, you have to add clear: both to the CSS of the next
element. i really dont like that, becase you dont always know what
element is going to come next.

I'm not sure what you are complaining about. If you're using floated
elements, you have to use the clear property if you don't want certain
elements to flow next to them. That's the nature of the beast. There is
more than one way to do this, however.

and sometimes it forces me to put a <br
style="clear: both" /> right after the columns, which i dont like
either.

That is an ugly way to clear a float.
http://www.quirksmode.org/css/clearing.html
http://positioniseverything.net/easyclearing.html

 

[cluthz]

Ok interesting input so far. PLaying around with it has been time consuming.

In htis case do you think it might be easier to just use a table with three
columns. Is this one of the scenarios when a able will just be easier to
deal with.

Other people will have to later on maintain this code and the use of floats
to me at present seems relatively complicated.