Alignment for form inputs on a line?

[pjfarley3]

Hi all, first post here. I have taken the excellent tutorials on HTML and CSS2, but I have a problem not answered in the HTML tutorial: How do I align multiple buttons on a line? <div> is not appropriate, extra line breaks are generated, and using style="align: center" inside the <input ...> tag does not seem to work either.Complicating factor: The line in question is one row of a table, and I do not want the row to occupy more than one line.Here is a code sample (sorry for the caps, some of this was copied from another location that didn't respect the lower case rule). The class "CBUTTONNORMAL" does not contain any alignment attributes, just color, border and font attributes. Browser is IE6.

<FORM METHOD=POST ACTION="/web/page">            <INPUT CLASS="CBUTTONNORMAL"	   style="ALIGN: left; WIDTH: 10%"                   TYPE=SUBMIT NAME=PREV                   VALUE=Prev>            <INPUT CLASS="CBUTTONNORMAL"	   style="ALIGN: center; WIDTH: 45%"                   TYPE=SUBMIT NAME=REFR                   VALUE=Refresh>            <INPUT CLASS="CBUTTONNORMAL"	   style="ALIGN: RIGHT; WIDTH: 10%"                   TYPE=SUBMIT NAME=NEXT                   VALUE=Next>        </FORM>

[real_illusions]

it works here in both firefox and ie6maybe its the way your putting them in the rest of the page??

[pjfarley3]

it works here in both firefox and ie6maybe its the way your putting them in the rest of the page??

<{POST_SNAPBACK}>

Depends on what you mean by "works here". On your system, does the third button get positioned on the right-hand edge of the browser screen (maximized browser)? Does the second button get centered in the middle of the browser screen?On maximized IE6 here (and in the W3C clickable code tester) the three buttons in the form just line up one right next to each other, with only a small amount of space between each one.What I would like is for the buttons to spread themselves out across the entire width of the screen according to the alignment I request: left, center, right. And since I don't know how the user will size their browser screen, I would like the buttons to dynamically adjust to dofferent screen sizes but keep the relative alignment the same.Can that be done?Peter

[real_illusions]

ahh..now i get you. they just line up one after the other.yes you can make it so they line up left, center and right no matter what size browser.not sure how you go about it without tables, without experimenting with divs.but with tables,

<table width="100%"><tr><td align="center" width=33%><FORM METHOD=POST ACTION="/web/page"><INPUT CLASS="CBUTTONNORMAL"style="ALIGN: left; WIDTH: 20%"TYPE=SUBMIT NAME=PREVVALUE=Prev></td><td width="33%" align="center"><INPUT CLASS="CBUTTONNORMAL"style="ALIGN: center; WIDTH: 45%"TYPE=SUBMIT NAME=REFRVALUE=Refresh></td><td align="center" width="33%"><INPUT CLASS="CBUTTONNORMAL"style="ALIGN: RIGHT; WIDTH: 20%"TYPE=SUBMIT NAME=NEXTVALUE=Next></FORM></td></tr></table>

i've changed the size of the buttons too, and into pixels, so the writing appears on them at different browser sizes.

[pjfarley3]

ahh..now i get you. they just line up one after the other.yes you can make it so they line up left, center and right no matter what size browser.not sure how you go about it without tables, without experimenting with divs.but with tables,<Snipped>i've changed the size of the buttons too, and into pixels, so the writing appears on them at different browser sizes.

<{POST_SNAPBACK}>

Ah-hah! Many thanks. I knew there had to be a way to use forms in a table, but the only example I had was badly miscoded.That would be an excellent teaching addition to the HTML course here. I would not have had to ask if that combination was in the course.Thanks for your help!

[netcracker]

not sure how you go about it without tables, without experimenting with divs.

there is another way, if u don't like to lose yourself in too many tables...it is not exactly alignment, bt it looks the way you want it.u may insert a "spacer" between the buttons. a spacer is a 1x1 px transparent gif, to which you give the height 1 and the width... any value as to look good on ypur page.this is just another way, it is your choice in the end

[pjfarley3]

there is another way, if u don't like to lose yourself in too many tables...it is not exactly alignment, bt it looks the way you want it.u may insert a "spacer" between the buttons. a spacer is a 1x1 px transparent gif, to which you give the height 1 and the width... any value as to look good on ypur page.this is just another way, it is your choice in the end

<{POST_SNAPBACK}>

Agreed, it is another way, but it does not keep the same look when the browser is resized (up or down). This will work only when you know how your user is going to size their browser window. Using the table data element for the alignment is OK by me because I don't have to calculate what pixel size to make things.Thanks for the help.