?
Solved

align textbox in table cell

Posted on 2005-03-23
7
Medium Priority
?
767 Views
Last Modified: 2012-06-27
Lets say I have a table cell with some text, and two textboxes.
I'm trying to get the text and the first textbox to left align in the cell and the second textbox to right align in the cell, but keep them all on the same line.
Is there a way to do this without creating a whole new table inside the cell?

This code is close, but it drops the second textbox onto a new line.
<td>
   Words and Stuff
   <input class="txtright" type="text" size="7"">
   <input style="float:right" type="text" size="15">
</td>

Anybody know how to get this to work in css???
0
Comment
Question by:ppdocs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 11

Expert Comment

by:ZhaawZ
ID: 13617736
you could try to set margin-left for second input. Looks like this:

<td>
   Words and Stuff
   <input class="txtright" type="text" size="7"">
   <input style="float:right; margin-left:150px;" type="text" size="15">
</td>
0
 
LVL 11

Accepted Solution

by:
ZhaawZ earned 1000 total points
ID: 13617756
Or you could try this:
<td>
   <div style="float:left;">Words and Stuff</div>
   <input style="float:left;" class="txtright" type="text" size="7">
   <input style="float:right;" type="text" size="15">
</td>


P.S. remove one quote at - size="7""
0
 
LVL 10

Assisted Solution

by:dij8
dij8 earned 1000 total points
ID: 13618322
Or this:
<td>
   <input style="float:right" type="text" size="15">
   Words and Stuff
   <input class="txtright" type="text" size="7"">
</td>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 23

Expert Comment

by:sciwriter
ID: 13618666
<This code is close, but it drops the second textbox onto a new line.>

Likely because the numbers stated are just too tight for the browser to display on one line.  Adjust the numbers, there is no reason why this should not work, agreed, others?
0
 

Author Comment

by:ppdocs
ID: 13622475
Even if I expand my window it wont move up to the same line.  There is plenty of room. This should at least work in IE6.  You can use this to test:
<html>
<body>
<table width = "100%">
<tr>
<td>
<input type=text>words<input type=text style="float:right">
</td>
</tr>
</table>
</body>
</html>
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13622785
One sure thing is that you need to place your floating elements before your non-floated elements in the html.  That's what dij8's code does:
<td style="text-align:left;">
  <input type=text style="float:right"><input type=text>words
</td>

If you still don't have them on one line, try setting the width of the floated element:
<td style="text-align:left;">
  <input type=text style="float:right; width: 8em;"><input type=text>words
</td>
0
 

Author Comment

by:ppdocs
ID: 13622897
Doh!  I totally missed that!  Thanks Guys
0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month9 days, 13 hours left to enroll

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question