Using position to create two columns

[mboehler3]

Hi, I have a form I am trying to style here: http://www.bigwarehouse.net/?page_id=18I want to create a table-like look with two columns, where the first column is 33% of the total width and the second column is 66% of the total width.If you look at the link, I want to have the A and B fields fit in the second column and be placed to the right of the other fields (Name of product and Email). How can I use CSS to accomplish this? It was suggested to me that I use absolute and/or relative positioning to do this, but I have tried this morning and nothing has worked. Can anyone offer some advice? It will be greatly appreciated. Thank you in advance and have a good day.

[jeffman]

Absolute positioning has its uses, but this is not one of them. What you want is 2 side-by side containers. Perhaps you are not familiar with the float and clear properties? It is impossible to make nice layouts without them. This link may help. It is not exactly what you are looking for, but it does indicate the way side-by-side <div> elements can be laid out. There is a longish tutorial, but you can certainly skip to the sample page and examine the HTML and CSS:http://www.sophox.com/wordpress/?p=177

[mboehler3]

Absolute positioning has its uses, but this is not one of them. What you want is 2 side-by side containers. Perhaps you are not familiar with the float and clear properties? It is impossible to make nice layouts without them. This link may help. It is not exactly what you are looking for, but it does indicate the way side-by-side <div> elements can be laid out. There is a longish tutorial, but you can certainly skip to the sample page and examine the HTML and CSS:http://www.sophox.com/wordpress/?p=177

Thanks for the link. I have added a float:right to the elements I want to float right, but they are not breaking onto a new line. Is there a way to get the A on top of the B, and the submit button to be underneath B? I'd also like them to be on the same line as the Name of Product fields, not breaking after them. How can I accomplish that?

[jeffman]

1. If block-level elements are to float next to each other on the same horizontal, all of them must have a float property.2. When you want elements in a floated series to begin on a new horizontal level, you must add a clear property to the element that begins the new horizontal. Unless you have a special reason not to, clear:both usually does the trick.

[mboehler3]

1. If block-level elements are to float next to each other on the same horizontal, all of them must have a float property.2. When you want elements in a floated series to begin on a new horizontal level, you must add a clear property to the element that begins the new horizontal. Unless you have a special reason not to, clear:both usually does the trick.

I've given a clear:both; to the Name of Product and Email fields, and it seems that doing so clears the line completely, so that the A and B fields are not displayed until after the Name of Product and Email fields. I want them both to appear on the same horizontal, just break onto a new line so that Name of Product lines up with A, line break, and Email lines up with B.Here's a mockup of what I'm trying to accomplish:http://i654.photobucket.com/albums/uu262/m...er3/bw-form.jpgIs there a way to separate these into two columns and break onto a new line without using the clear? It seems the clear is clearing everything so they can't line up on the same horizontal.

[jeffman]

Wow. I just took a very close look at your HTML. If I had done that sooner, I would have realized that most of your page is typed on a single line. (That's what my source view shows, anyway.) The point is, that kept me from seeing most of your HTML.So I did not realize that almost your entire structure is hanging on <ul> elements, or that it is so incredibly complicated.I never would have suggested floating things if I had known that. I have no doubt that adding floats and clears to these structures will lead to unpredictable results.I would have suggested (as I am now) that the list structure is not good for what you are trying to accomplish. It creates more HTML than you need. Worse, to position things as you want, you'll need to redefine all the list items so that they don't behave like list items and behave like something else. That's a CSS nightmare. No wonder you're baffled.So my new advice is to get rid of the lists. Rebuild the whole form. That's less work than it seems, because you'll still need each label-input unit to be wrapped in something like a div. Then you can start thinking about columns and floating things.

[mboehler3]

Wow. I just took a very close look at your HTML. If I had done that sooner, I would have realized that most of your page is typed on a single line. (That's what my source view shows, anyway.) The point is, that kept me from seeing most of your HTML.So I did not realize that almost your entire structure is hanging on <ul> elements, or that it is so incredibly complicated.I never would have suggested floating things if I had known that. I have no doubt that adding floats and clears to these structures will lead to unpredictable results.I would have suggested (as I am now) that the list structure is not good for what you are trying to accomplish. It creates more HTML than you need. Worse, to position things as you want, you'll need to redefine all the list items so that they don't behave like list items and behave like something else. That's a CSS nightmare. No wonder you're baffled.So my new advice is to get rid of the lists. Rebuild the whole form. That's less work than it seems, because you'll still need each label-input unit to be wrapped in something like a div. Then you can start thinking about columns and floating things.

Thanks for looking at the code, I very much appreciate it. The thing is, if you can't tell already, this is a Wordpress page, and the form is created by a plugin. Thus, I don't have much control over the structure of the code, as it is, by default, wrapped in the wrapper and body code. Unfortunately, I have to stick with the list structure.My guess is you're correct - that in order to position things how I want, I will need to redefine the list items so they don't behave like list items. By looking at the CSS, http://www.bigwarehouse.net/wp-content/plu...s.css?ver=2.9.2, I'm assuming that I wll have to make some changes to the global settings. Now I've tried to play around with it a little bit to no avail. Can you offer me a starting point as to where I should begin? I'm stuck and need an outside set of eyes.

[jeffman]

I use wordpress, too, and I know about plugins. You don't have to use it.