I did something similar on a client's site recently; it might work for you.

I had two categories of data that we wanted to collect. I put the items for each category in a field group and floated the fieldgroups similar to what you've done for the individual fields. When the "right" fieldgroup wouldn't fit within the page, IE would move it below the left fieldgroup. While this wasn't exactly what we wanted, it worked and was quite acceptable.

Unsolicited advice: There's an empty div (id="right_bottom") that has a minimum height specified. I suggest only producing this div if it actually has content.

Hope this helps,
Curt

hmm im having trouble following exactly what to do here. I did try to make the second container larger and it bumps to the second line in modern browsers.. however.. in ie7 if you look at it in firebug.. and select view-class ids .. it looks as if the first line is holding many divs inline on that first line.. without any of them bumping down to another line.. ???????? What should I do?

There are issues with how the form is displayed in Safari as well.

Are you talking about ie7 and the developer toolbar from Microsoft? Is that what you're using?

i am using firebug....Im just trying to get this drupal webform to be two columns.. and it seems as tho browsers are making it harder than it has to be.

If you want to see what's going on in IE try the IE developer toolbar. You can see how the css is working in that browser.

Not all browsers are alike. IE 8 is the first browser that Microsoft has put out that's any good with CSS. The previous ones have bugs, don't follow the spec, and do odd things. You have to work those as special cases.

I'm having a real problem figuring out what you're trying to do, here. If you're wanting to create two columns in the form, there's a width spec missing somewhere.

Can you give some more detail about what it is you're trying do?

Go to this website... It was the original post where I asked how to make a drupal webform two columns.
I did it as he gave me the example. It looked fine in f.f. but in ie 7 it was a mess... I took the css out of my site because I got so frustrated with it but this is my css if you would like.

http://geeksandgod.com/forums/dynamic-website-foru...

/********************webform*********************/
.form-item label
{
font-weight:bold;
font-family:arial;
color:#fff;
font-weight: bold;
font-size:11px;
}

/* make everything the same width */
.webform-component-textfield{
width:240px;
}
.webform-component-email{
width:240px;
padding-top:10px;
}
.webform-component-textarea{
width:450px;
}
/* your_name and churchorganization side by side */
/* Float this left and clear anything on the left */
#webform-component-your_name {
float:left;
clear:left;
}

/* Float this left and clear anything on the right */
#webform-component-host_churchorganization {
float:left;
clear:right;
}

/* next row: positiontitle & address side by side */
#webform-component-your_positiontitle {
clear:left;
float:left;
}
#webform-component-address {
float:left;
clear:right;
}
#webform-component-city {
clear:left;
float:left;
}
#webform-component-stateprovinceisland {
float:left;
clear:right;
}
#webform-component-zip_code {
clear:left;
float:left;
}
#webform-component-country {
float:left;
clear:right;
}
#webform-component-office_hours {
clear:left;
float:left;
}
#webform-component-telephone {
float:left;
clear:right;
}
#webform-component-fax {
clear:left;
float:left;
}
#webform-component-church_website {
float:left;
clear:right;
}

#webform-component-email_address {
clear:left;
float:left;
}
#webform-component-contact {
float:left;
clear:right;
}
#webform-component-event_date {
clear:left;
float:left;
}
#webform-component-event_time {
float:left;
clear:right;
}
#webform-component-event_location {
float:left;
clear:both;
}
#webform-component-event_address {
float:left;
clear:both;
}
#webform-component-themepurpose {
float:left;
clear:both;
}
#webform-component-scripture_ref {
float:left;
clear:both;
}
#webform-component-other_information{
float:left;
clear:both;
}

#webform-component-how_did_you_first_hear_about_evangelistprophetess_denise_mather{
float:left;
clear:both;
}
.textarea-identifier {
display:none;
}
.form-submit{
float:left;
clear:both;
}

#webform-component-message_subject{
float:left;
clear:both;
}

#webform-component-message{
float:left;
clear:both;
}

#webform-component-person_prayer_request_is_for{
float:left;
clear:both;
}
#webform-component-the_prayer_need_is{
float:left;
clear:both;
}
#webform-component-prayer_request_details{
float:left;
clear:both;
}

#edit-submitted-your-name-wrapper label
{
float: left;
text-align: left;
width:100px;/* set this to however long your label is so it doesn't wrap */
padding-right: 5px; /* do some padding stuff - optional */
}

/* have to get very specific for the form element itself */
input#edit-submitted-your-name.form-text
{
/* set the size of the input box if you didn't get it in cck or
you want them all the same*/
width: 100px;
margin-bottom: 1px; /* sets a margin if you want it - optional */
}

#edit-submitted-host-churchorganization-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-host-churchorganization.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-your-positiontitle-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-your-positiontitle.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-address-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-address.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-city-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-city.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-stateprovinceisland-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-stateprovinceisland.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-zip-code-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-zip-code.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-country-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-country.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-office-hours-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-office-hours.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-telephone-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-telephone.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-fax-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-fax.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-church-website-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-church-website.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-email-address-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-email-address.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-contact-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-contact.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-event-date-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-event-date.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-event-time-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-event-time.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-person-prayer-request-is-for-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-person-prayer-request-is-for.form-text
{
width: 100px;
margin-bottom: 1px;
}
#edit-submitted-your-first-name-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-your-first-name.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-your-last-name-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-your-last-name.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-first-name-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-first-name.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-last-name-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-last-name.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-reason-for-contact-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-reason-for-contact.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-organization-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-organization.form-text
{
width: 100px;
margin-bottom: 1px;
}

#edit-submitted-phone-wrapper label
{
float: left;
text-align: left;
width: 100px;
padding-right: 5px;
}
input#edit-submitted-phone.form-text
{
width: 100px;
margin-bottom: 1px;
}

My goodness the divs are breeding like rabbits!

Seriously, if there's no other reason for the divs, they could be part of the problem. But if you want/need to keep them, go ahead.

The basic principle is to float all the label/input groups left, and give each one a width of 49%; Then if there's something you need to see happen below them, slip a clear: left on the style for it.

I'm sorry I don't have time at the moment to comb through the eleventy-seven css files to find the right places to put these, and I'm sorry I'm not a Drupal guy so I don't know which of the divs actually are necessary for this module, and which are just tossed in for good measure, like too many module developers (of *every* CMS, not just Drupal) do all too often. I *do* know absolutely none of the divs inside the form are necessary for styling the form the way you're wanting, providing you can adjust the html output a little (<label...><input.../></label> is sufficient for this purpose). By placing the input inside of the label, you only need to float the label left and set the width to 49% to get the list of labels displayed in two columns ordered horizontally. If you can't reorder/change the html, put the float and width on the outside div for each group (and you'll probably need overflow:hidden to control IE6's mania -- one reason I dislike floats). By using 49% we control for rounding errors of a single pixel which can result in , for example, two 250px wide columns not fitting inside a 499px wide container. Adjust that number to control for padding an margin as necessary.

Remember, floats do not take up space in the flow, so if something is supposed to follow these, it needs clear: left to do it.

thanks.. ill try your suggestion. those are drupal made divs
not mine... i floated left with a px width and cleared left or right depending.. maybe using the % like you suggested it might work.. and I already have the container set to overflow hidden and it doesnt seem to be doing a thing.. so Ill try to set something else to hidden and see if anything works... Thanks again