Form Fieldsets Side by Side - Use Divs, Tables, or ...?

Hello, I’m wrestling with a “simple” contact form (not simple to me, though, right now!). I’d merely like to have two fieldsets side by side on a page.

                         DETAILS: The fieldset on the left, though, will [u]not[/u] contain any actual form info -- just text (my contact address and phone #) -- but it will have a LEGEND and be enclosed by the fieldset BORDER. The reason for this is so that that information will visually look like the fieldset to the right of it that contains the form input fields for the visitor's name, email and comments, and the Submit and Reset buttons. I like the way a fieldset border can include a fieldset legend, which in the case of these two fieldsets will be, respectively, "Address and Phone Number" and "Email."

In my experimentation, I’ve had difficulty getting the information to be side-by-side. I’ve tried using tables to separate the two fieldsets, and I’ve tried using floated divs to separate the two sides without using fieldsets. Still, I’m not getting the field info on the right-hand side to line up properly.

It is possible to do this, isn’t it? Are there some CSS keys I need to keep in mind to achieve this? Do I use divs or tables for this? Or is there a better way to achieve the function AND visual look I’m after?

                    Thanks for any help!
                         
                         Deb

Hello

Deb have a look at this tread Paul made a very nice job of it

Hi, all4nerds – I read through that thread recently, and I read some of the links referred to in it. I must have overlooked some key concepts that will apply to my form, so I’ll go back through the thread and see if I can identify what’s key to helping me succeed with my form. Thank you!

Deb

There’s a simpler form here ;

http://www.pmob.co.uk/temp/form4.htm

Which may be of use. You could just float them side by side as required.

Thanks for that additional post, Paul O’B. I did go to the previous thread recommended by all4nerds. I don’t necessarily understand all the details (!), but I managed to work with the info and some of your great code and have come up with pretty much what I wanted to achieve. (Couldn’t have done it without some help!)

There are just a couple of very small issues I’ve not been able to fix. Hopefully, they’re easy fixes. (All the code isn’t as tidy as it could be yet.)

           You can view my contact form here:
          [http://www.believegraphics.com/webpage/contact4-pl.html](http://www.believegraphics.com/webpage/contact4-pl.html)
          
          The CSS is here:
          [http://www.believegraphics.com/webpage/stylesheets/forms3.css](http://www.believegraphics.com/webpage/stylesheets/forms3.css)
  1. How can I line up the fieldsets on the left-hand side so their left edge falls directly under the beginning of the heading, “Contact Information.” I tried adjusting the padding for the #leftcolumn div, but there’s no change when viewed in Firefox or IE 6.

  2. How can I move up the word “Comments” to be even with the top of the textarea box in the “Email” fieldset? Currently, it’s positioned at the bottom of the textarea box.

    That’s all, I think! And thanks for such great posts.

    Deb

Hi,

  1. Why don’t you just move the h1 over to the left a bit by 6px using padding

  2. use vertical-align:top on the textarea. You also have anmissin semi-colan in your lable defintion which is stopping your label from floating. However you don’t need the float anyway so change the code to this:


label{
 padding-right: 6px;
 font-weight: bold;
 font-size:: 12px;
[b] color: #999999;
 /*float:left;*/
[/b] text-align: right;
 clear:left;
 background: #FFFFFF;
 color: #666666;
 line-height: 20px;
}
[b]p.comments textarea{vertical-align:top}
h1{padding-left:6px;}
[/b]

Hope that helps :wink:

I would do that except, visually speaking, I want the h1s to begin straight down from the beginning of “Believe Graphics” in the header. All my pages have the h1 tags positioned at the same spot, and I’d prefer not to have the header on the contact page look like it’s jumping to the left when you come to it. Any other options?

Thanks for the info on vertically positioning “Comments.”

Thanks SO much! :slight_smile:

So sorry to be coming back on this. The adjustment of the left-hand fieldsets looks fine now, but I must have done something wrong in my attempt to move up “Comments” – of course, please note I’ve since changed it to “Message” at various points in the .html. (New files have been uploaded.) I modified the code mentioned above to:

[b]p.[color=Red]message[/color] textarea{vertical-align:top}[/b]

I’ve probably made a mistake somewhere related to moving up “Message,” but I just can’t see it.

Can you help once more? Thank you.

You didn’t add the class to the p tag lol :slight_smile:


			<p [b]class="message[/b]">
			 <label for="Message">Message</label>
			 <textarea name="Message" cols="27" rows="5" id="Message"></textarea>
			</p>

I’m not quite sure what you are trying to line up exactly. You say you want the fieldset lined up with the contact Information which you want lined up with the Believe heading. At prsent the fiedset border is closer to being lined up with the Believe heading than the contact heading is!

Or do you mean you want the words My name, My Address etc lined up?

If you want the whole fiedset moved left then adjust the padding on the leftcolumn.


 #leftcolumn {
[b] padding-left: 0px;[/b] 
 margin-right: 30px;
 float: left;
 width: 200px; 
}

You also have padding on the paragraph that you can tweak also.


#leftcolumn p {
 [b]padding-left: 8px[/b];
 line-height: 17px;
}


It all depends exactly what you want ot move :slight_smile:

Hi, Paul O’B – Oh yes, the p tag.:blush: Got that fixed now. Thanks!

   I was wanting the [u]borders[/u] of the left-hand fieldsets moved a little further to the right. They're looking just fine now. For some reason, though, I can't get the h1 to move *at all* to the left. There must be some other related margins/paddings in play here, but I haven't found the key to that. I made various changes, but ended up having to revert back to a previously saved versions (new file links below):
       
       [http://www.believegraphics.com/webpage/contact5-pl-strict.html](http://www.believegraphics.com/webpage/contact5-pl-strict.html)
       [http://www.believegraphics.com/webpage/stylesheets/forms4.css](http://www.believegraphics.com/webpage/stylesheets/forms4.css)

I can live with the layout as it is now, but I am curious as to why I can’t move the h1 to the left. Do you have time to take a look at that? If not, no prob.

As far as validating as an XHTML 1 Strict document, I’m getting errors on the two lines highligted in red below. Is there an easy fix for this, or would I need to go back to XHTML 1 Transitional?

<div id="maincol">
          <h1>Contact Information
          <div id="content">
            <form id="main" action="/[file name here]" method="post" onsubmit="return checkSubmit(this);">
            [color=Red]<input type="hidden" name="subject" value="Believe Graphics :: Inquiry" />
             <input type="hidden" name="redirect" value="http://www.believegraphics.com/webpage/thank-you-contact.html" />[/color]
          	<div id="leftcolumn">

Thanks very much. :slight_smile:

Hi,

The h1 can be moved left by adjusting the margins and padding in this style:


 h1 {
 font:italic bold 18px/23px Arial, Helvetica, sans-serif;
 color:#C3AC40;
[b] margin-left: 15px;/* reduc this to zero*/
[/b] [b]padding: 6px;/* adjust this to suit */
[/b] margin-top: 0px;
 margin-right: 0px;
 margin-bottom: -2px;
 }

The input elements need to be wrapped in a block level elements such as a P tag. refer to the other form structure as an exnmple:
e.g.


			[b]<p>
[/b]			  <input type="submit" class="go" id="send" title="Send It!" value="Send Email" />
			  <input type="reset" value="Reset Form"  class="button" title="Clear Form" />
		   [b] </p>
[/b]

Of course you can style the p to have no detrimental effect (if you already have styles for it) by adding a class if neceessary.

Hmmm, I thought I had messed with those, but I’ll go back and do so. :slight_smile:

That’s so simple, I’m a little embarrassed. :rolleyes: Still, I needed to ask.

I do appreciate your taking time to explain things and provide examples, especially on issues you've probably addressed a [u]million times[/u]. It's such a help, though, when one is still trying to grasp concepts, and things are not quite coming together.
  
  Thanks so much.

Probably like you, Paul O’B, I keep hoping I won’t keep revisiting this issue. :blush: So sorry to be back.

When I add the following p class to the inputs, a horizontal aqua bar appears in browsers under the h1 tag (“Content Information”) where the inputs are:

 <p class="form_area">
          <input type="hidden" name="subject" value="Believe Graphics :: Inquiry" />
          <input type="hidden" name="redirect" value="http://www.believegraphics.com/webpage/thank-you-contact.html" />
 </p>

I inserted the following style, but it doesn’t affect the blue bar:

	p.form_area input {
        	background: #FFFFFF;
        	}

I’m baffled. How do I correct this? Thank you. :blush:

 Same links as before, but revised:
    [http://www.believegraphics.com/webp...-pl-strict.html](http://www.believegraphics.com/webpage/contact5-pl-strict.html)
                [http://www.believegraphics.com/webp...eets/forms4.css](http://www.believegraphics.com/webpage/stylesheets/forms4.css)

hi,

Jusdt ditch the p and use a div instead. It will still validate and save you using a class.


		<form id="main" action="/cgi-bin/hear-from.pl" method="post" onsubmit="return checkSubmit(this);">
		  <div>
			<input type="hidden" name="subject" value="Believe Graphics :: Inquiry" />
			<input type="hidden" name="redirect" value="[http://www.believegraphics.com/webpage/thank-you-contact.html](http://www.believegraphics.com/webpage/thank-you-contact.html)" />
		  </div>


That should display nothing :slight_smile:

I presume there’s something in the CSS that’s causing the problem, because as soon as I insert the divs, just as with the p tags, that section turns blue. When I remove them, the blue goes away.

I could resort to XHTML 1 Trans to pass validation, but I’d prefer to go with Strict, if it’s possible. Do you have any other thoughts on this? Sorry. :frowning:

Hello

/p.form_area input/ is not targeting the p tag?,/(Content) .form_area/ is, Please use form-area

Hi Ben,

We changed the p to a div so it should have no styles affecting it. It seemed to work locally.

If we change it back to a p and then use p.form_area {display:none} then it should hide the fields complletely.

I’ve just checked again and an empty div does the job locally in all my browsers. Your online version hasn’t nbeen updated so I can’t see what you did :slight_smile:

As Ben (all4nerds) said your original style was targetting the input background and not the p background. However I tested locally and it didn’t remove the colour from ie whic is why I suggested a div instead :wink:

Hello

yes Deb you locked up your downloads so we can’t get it all

I’ve just noticed what the real problem is :slight_smile:

You have coloured the form here:


form {
 [b]background: #99FFFF[/b];
}


The p tag around the hidden inputs is the only place it shows because everything else is either floated or coloured.

Why have you coloured the form ? :slight_smile: