need to show text and form(submit button) on same line

can anyone help me to show text and form(submit button) on same line using css?
my code is :

Click <strong>Next</strong> button to continue.
<form method="post" action="index.php?step=4">
<table border="0" cellspacing="0" cellpadding="0" id="next">
  <tr>
    <td><input type="submit" name="adminok" value="Next" id="next" /></td>
  </tr>
</table></form>

Code (markup):

I need this Click <strong>Next</strong> button to continue. to be shown on left side and submit button(next) to be shown on right side of same line.
I am using float:right; on table id="next"
so the button is fine , and text is at right place too , but there is a line break between them..

can anyone help me please?

 

Here is a crude example without any CSS. I would not recommend this because I don't like tables for layout purposes. If you want a div+css example let me know...

<table width="100%">
  <tr>
    <td>Click <strong>Next</strong> button to continue.</td>
    <td align="right"><input type="submit" name="adminok" value="Next" id="next" /></td>
  <tr>
</table>

Code (markup):

 

By line break do you mean new line?

Have you thought of simply setting the text inside the form and getting rid of the table?

<form id="whatever" action="index.php?step=4" method="post">
<div>
<label for="adminok">Click <strong>Next</strong> button to continue</label>
<input type="submit" name="adminok" id="adminok" value="Next" />
</div>
</form>

Float the label left and if the submit insists on having its own new line, set it to display:inline... technically an input is inline but submits kinda follow their own rules sometimes. If it continues to be stubborn, you can always float the submit left as well. The id on the submit was changed to match the "for" in the label (accessibility reasons, do what you want). Set an appropriate width on the label so it sits on one line and still has room for the submit.

*Edit the div is needed as the labels and inputs have to be within a block element while inside the form... normally a fieldset can do that but then you must have a legend and I thought all this was too much for one measley submit button... : )

 

@manishk
i said , i have table id="tblinsert" , and in css , it has float:right;
means i cant use <td> to show text.
if i do this, it shows the text to right side of page.
i want text to be in left side.
same goes for you Stomme poes
if u can make div+css , then it will be welcome , but it must work with my table id cuz i cant remove that id, it will ruin my page's layout.

 

Hmm... but I still don't see the need to wrap the submit in a table... you could give the submit itself the same id as the table, remove the table... the button is floated instead (so long as you give it a width... it will float without the width but may be unpredicable).

I mean, it looks like you're wrapping the submit in the table in order to float it. Is this particular table doing something else as well?? If you need to follow the rule of stuff inside forms needing a block element, it could still be a div (but I'd just have it sitting in there and still float only the submit). I've set submits to display:block for positioning reasons as well (though they don't seem to need it).

Otherwise, you could post an image of what you want, and how it looks now, and what other tables are going on around.

 

Being that the text is inline, and inputs are a special case akin to inline-block - I'm not following the need for the table here... and shouldn't that text be a LABEL?!?

<form method="post" action="index.php?step=4" id="next">
	<!-- div exists SOLELY to keep validator happy in 'strict' -->
	<div>
		<label>Click <strong>Next</strong> button to continue.</label>
		<input type="submit" name="adminok" value="Next" id="next" />
	</div>
</form>

Code (markup):

With the following CSS:

#next div {
	overflow:hidden; /* wrap floats */
	width:100%;	/* haslayout wraps floats IE */
}

#next label {
	float:left;
}

#next input {
	float:right;
}

Code (markup):

and because we set the div to wrap floats, we don't have to sweat clearing the floats either.

 

well table is required for the stylish borders for submit buttons i have made..

 

Thanks to deathshadow for holding up my form as a model : ) hehe

Honestly CSS should steal Perl's motto: there's more than one way to do it. Tim Toady : )
There is almost certainly a way to make the submit look cool without the table, possibly even still using the same images you already have.

Check out www.pizzaatje.nl and find the tomato. With ANY graphical browser from this century excepting the dinosauric IE6, wave the mouse over the tomato and click and hold the click over the tomato. Guess what? That tomato is a submit button. After pulling out much of my hair I forced that little B to do my bidding (except in IE because Microsoft makes browsers which don't know what :hover and :active mean... that's you too, IE7!)

Depending on what you want with your submits, that trick I used may not be appropriate... it's just an example to show that CSS can do a LOT of tricks-- the purpose of which is to keep the html clean and valid. Sure, you can legally get away with wrapping a table around each and every submit button, but it's just so damn inefficient... driving around town a few times before going to where you really wanted to go just to waste the fuel.

If you really need some image magic, deathshadow can show you. The images of teh Interwebs are putty in his hands. In the process, you get to learn new curses. I'm as red as any Communist on the inside but "open sores" still makes me weep.

 

Well, in that case you should probably have enclosed the css or a preview image of the effect you are aiming for...

 

i didnt understand a word which u said stomme_poes
what are you trying to say ? can u make yourself more clear?

 

Ok, now THAT's comedy.

 

Heh, not everyone speaks great English here, and English makes NO sense if you only know literal meanings.

http://www.pizzaatje.nl/zoekknoppen.gif I used this image to make a submit button. The trick was using submit type="image" and having a transparent image placed in the HTML. CSS sticks the tomato-images as a background image and when the mouse moves around them, the position slides so the tomato's change on mouse hover and mouseclick.

My point was that I don't think you need the table to decorate the submit. I think you can do it another way which doesn't have a table around it. To us, it's wasteful and ugly to add stuff to html when it's not needed.

Show us a picture of how you want the submit to look like.