Align right increasing height of cell

tshad

I have a cell with 2 items in it: a textbox and a link.

The link is actually a button (image), but for the example I am using a
link, which is doing the same thing.

Here is the stripped down version of my page that shows the problem:

*************** *************** *************** *************** *************** ********
<html>
<head></head>
<body>
<table id="DataList1" cellspacing="0" cellpadding="0" border="1"
width="400" style="margin:0 ">
<tr>
<td align="Center">
<table id="DataList1__ ctl12_newQuesti onPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1 :_ctl12:newQues tion" type="text" size="20"
id="DataList1__ ctl12_newQuesti on" />
<div align="right">
<a id="DataList1__ ctl12_btnAdd">t est</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
*************** *************** *************** *************** *************** *************** *

If you take out the <div> tags, the word test will be directly after the
text box with the height of the cell the same as the text box. I wanted to
put the link all the way to the right without creating another cell and the
only way I could seem to sort of get it to work was the above way.

The problem is that the height of the cell doubles and the work "test" goes
all the way to the right, but down to the bottom of the cell (below the text
box).

Why is it doing this and how do I get it to directly to the right of the
textbox?

Thanks,

Tom.

Nov 19 '05 #1

Subscribe Reply

1789

Ken Dopierala Jr.

Hi Tom,

Try the code below. I added another table inside of the cell giving you
trouble:

<html>
<head></head>
<body>
<table id="DataList1" cellspacing="0" cellpadding="0" border="1"
width="400" style="margin:0 ">
<tr>
<td align="Center">
<table id="DataList1__ ctl12_newQuesti onPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td>
<input name="DataList1 :_ctl12:newQues tion" type="text" size="20"
id="DataList1__ ctl12_newQuesti on" /></td>
<td align="right">< a id="DataList1__ ctl12_btnAdd">t est</a></td>
</tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Good luck! Ken.

--
Ken Dopierala Jr.
For great ASP.Net web hosting try:
http://www.webhost4life.com/default.asp?refid=Spinlight
If you sign up under me and need help, email me.

"tshad" <ts**********@f tsolutions.com> wrote in message
news:u3******** ******@TK2MSFTN GP11.phx.gbl...

I have a cell with 2 items in it: a textbox and a link.

The link is actually a button (image), but for the example I am using a
link, which is doing the same thing.

Here is the stripped down version of my page that shows the problem:

*************** *************** *************** *************** *************** *
******* <html>
<head></head>
<body>
<table id="DataList1" cellspacing="0" cellpadding="0" border="1"
width="400" style="margin:0 ">
<tr>
<td align="Center">
<table id="DataList1__ ctl12_newQuesti onPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1 :_ctl12:newQues tion" type="text" size="20"
id="DataList1__ ctl12_newQuesti on" />
<div align="right">
<a id="DataList1__ ctl12_btnAdd">t est</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
*************** *************** *************** *************** *************** *
***************
If you take out the <div> tags, the word test will be directly after the
text box with the height of the cell the same as the text box. I wanted to put the link all the way to the right without creating another cell and the only way I could seem to sort of get it to work was the above way.

The problem is that the height of the cell doubles and the work "test" goes all the way to the right, but down to the bottom of the cell (below the text box).

Why is it doing this and how do I get it to directly to the right of the
textbox?

Thanks,

Tom.

Nov 19 '05 #2

bruce barker

that because a div by default is a block element (same as a table). that
means they implay a <br> before and after. you can change the style to
inline, but then you need to set a width. the best is to use a nested
table:

<table cellpading = 0 cellspacing=0 border=0 width=100%>
<td><input name="DataList1 :_ctl12:newQues tion" type="text" size="20"
id="DataList1__ ctl12_newQuesti on" /></td>
<td align=right><a id="DataList1__ ctl12_btnAdd">t est</a></td>
</table>

-- bruce (sqlwork.com)

"tshad" <ts**********@f tsolutions.com> wrote in message
news:u3******** ******@TK2MSFTN GP11.phx.gbl...
| I have a cell with 2 items in it: a textbox and a link.
|
| The link is actually a button (image), but for the example I am using a
| link, which is doing the same thing.
|
| Here is the stripped down version of my page that shows the problem:
|
|
*************** *************** *************** *************** *************** *
*******
| <html>
| <head></head>
| <body>
| <table id="DataList1" cellspacing="0" cellpadding="0" border="1"
| width="400" style="margin:0 ">
| <tr>
| <td align="Center">
| <table id="DataList1__ ctl12_newQuesti onPanel" cellpadding="0"
| cellspacing="0" border="0" width="100%">
| <tr>
| <td>
| <input name="DataList1 :_ctl12:newQues tion" type="text" size="20"
| id="DataList1__ ctl12_newQuesti on" />
| <div align="right">
| <a id="DataList1__ ctl12_btnAdd">t est</a>
| </div>
| </td>
| </tr>
| </table>
| </td>
| </tr>
| </table>
| </body>
| </html>
|
*************** *************** *************** *************** *************** *
***************
|
| If you take out the <div> tags, the word test will be directly after the
| text box with the height of the cell the same as the text box. I wanted
to
| put the link all the way to the right without creating another cell and
the
| only way I could seem to sort of get it to work was the above way.
|
| The problem is that the height of the cell doubles and the work "test"
goes
| all the way to the right, but down to the bottom of the cell (below the
text
| box).
|
| Why is it doing this and how do I get it to directly to the right of the
| textbox?
|
| Thanks,
|
| Tom.
|
|

Nov 19 '05 #3

tshad

"bruce barker" <no***********@ safeco.com> wrote in message
news:ec******** ******@tk2msftn gp13.phx.gbl...

that because a div by default is a block element (same as a table). that
means they implay a <br> before and after. you can change the style to
inline, but then you need to set a width. the best is to use a nested
table:

<table cellpading = 0 cellspacing=0 border=0 width=100%>
<td><input name="DataList1 :_ctl12:newQues tion" type="text"
size="20"
id="DataList1__ ctl12_newQuesti on" /></td>
<td align=right><a id="DataList1__ ctl12_btnAdd">t est</a></td>
</table>
I was hoping to get away from using another table. I thought I would be
able to right justify the button/link. It does right justify, just adds the
<br> as you say. I tried to change the div to span and it would right
justify at all.

Adding the table maybe the only way to solve the problem.

Thanks,

Tom.
-- bruce (sqlwork.com)

"tshad" <ts**********@f tsolutions.com> wrote in message
news:u3******** ******@TK2MSFTN GP11.phx.gbl...
| I have a cell with 2 items in it: a textbox and a link.
|
| The link is actually a button (image), but for the example I am using a
| link, which is doing the same thing.
|
| Here is the stripped down version of my page that shows the problem:
|
|
*************** *************** *************** *************** *************** *
*******
| <html>
| <head></head>
| <body>
| <table id="DataList1" cellspacing="0" cellpadding="0" border="1"
| width="400" style="margin:0 ">
| <tr>
| <td align="Center">
| <table id="DataList1__ ctl12_newQuesti onPanel" cellpadding="0"
| cellspacing="0" border="0" width="100%">
| <tr>
| <td>
| <input name="DataList1 :_ctl12:newQues tion" type="text" size="20"
| id="DataList1__ ctl12_newQuesti on" />
| <div align="right">
| <a id="DataList1__ ctl12_btnAdd">t est</a>
| </div>
| </td>
| </tr>
| </table>
| </td>
| </tr>
| </table>
| </body>
| </html>
|
*************** *************** *************** *************** *************** *
***************
|
| If you take out the <div> tags, the word test will be directly after the
| text box with the height of the cell the same as the text box. I wanted
to
| put the link all the way to the right without creating another cell and
the
| only way I could seem to sort of get it to work was the above way.
|
| The problem is that the height of the cell doubles and the work "test"
goes
| all the way to the right, but down to the bottom of the cell (below the
text
| box).
|
| Why is it doing this and how do I get it to directly to the right of the
| textbox?
|
| Thanks,
|
| Tom.
|
|

Nov 19 '05 #4

James Thomas

YOu can do this using CSS and floats. Additionally, you may be able to
do it using a span tag instead of a div tag, though not 100% certain.

James

tshad wrote:

I have a cell with 2 items in it: a textbox and a link.

The link is actually a button (image), but for the example I am using
a link, which is doing the same thing.

Here is the stripped down version of my page that shows the problem:

*************** *************** *************** *************** **********
************* <html>
<head></head>
<body>
<table id="DataList1" cellspacing="0" cellpadding="0" border="1"
width="400" style="margin:0 ">
<tr>
<td align="Center">
<table id="DataList1__ ctl12_newQuesti onPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1 :_ctl12:newQues tion" type="text"
size="20" id="DataList1__ ctl12_newQuesti on" />
<div align="right">
<a id="DataList1__ ctl12_btnAdd">t est</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
*************** *************** *************** *************** **********
*************** ******

If you take out the <div> tags, the word test will be directly after
the text box with the height of the cell the same as the text box. I
wanted to put the link all the way to the right without creating
another cell and the only way I could seem to sort of get it to work
was the above way.

The problem is that the height of the cell doubles and the work
"test" goes all the way to the right, but down to the bottom of the
cell (below the text box).

Why is it doing this and how do I get it to directly to the right of
the textbox?

Thanks,

Tom.

Nov 19 '05 #5

tshad

"James Thomas" <Ra****@nospam. nospam> wrote in message
news:10******** *****@corp.supe rnews.com...

YOu can do this using CSS and floats. Additionally, you may be able to
do it using a span tag instead of a div tag, though not 100% certain.
I thought of that (span), also. It doesn't seem to work. Maybe it has to
do with the fact that it goes to another line and then right justifies it.

How would I change it with CSS (preferably inline)?

Thanks,

Tom.

James

tshad wrote:
I have a cell with 2 items in it: a textbox and a link.

The link is actually a button (image), but for the example I am using
a link, which is doing the same thing.

Here is the stripped down version of my page that shows the problem:

*************** *************** *************** *************** **********
************* <html>
<head></head>
<body>
<table id="DataList1" cellspacing="0" cellpadding="0" border="1"
width="400" style="margin:0 ">
<tr>
<td align="Center">
<table id="DataList1__ ctl12_newQuesti onPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1 :_ctl12:newQues tion" type="text"
size="20" id="DataList1__ ctl12_newQuesti on" />
<div align="right">
<a id="DataList1__ ctl12_btnAdd">t est</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
*************** *************** *************** *************** **********
*************** ******

If you take out the <div> tags, the word test will be directly after
the text box with the height of the cell the same as the text box. I
wanted to put the link all the way to the right without creating
another cell and the only way I could seem to sort of get it to work
was the above way.

The problem is that the height of the cell doubles and the work
"test" goes all the way to the right, but down to the bottom of the
cell (below the text box).

Why is it doing this and how do I get it to directly to the right of
the textbox?

Thanks,

Tom.

Nov 19 '05 #6

James Thomas

Roughly:

CSS:
Left {
float: left;
width: 7em;
}

br {
clear: both;
}

<label class="left">Wh atever
<TEXTBOX CONTROL HERE>
<br /> <-- Restores float so things align as they should -->

I'm just learning this myself but have used something similar to the
above to create tableless order entry forms.

James

"James Thomas" <Ra****@nospam. nospam> wrote in message
news:10******** *****@corp.supe rnews.com...
YOu can do this using CSS and floats. Additionally, you may be able
to do it using a span tag instead of a div tag, though not 100%
certain.

I thought of that (span), also. It doesn't seem to work. Maybe it
has to do with the fact that it goes to another line and then right
justifies it.

How would I change it with CSS (preferably inline)?

Thanks,

Tom.

James

tshad wrote:
I have a cell with 2 items in it: a textbox and a link.

The link is actually a button (image), but for the example I am using >> a link, which is doing the same thing.
Here is the stripped down version of my page that shows the problem:
*************** *************** *************** *************** ********** ************* <html> >> <head></head>
<body>
<table id="DataList1" cellspacing="0" cellpadding="0" border="1"
width="400" style="margin:0 ">
<tr>
<td align="Center">
<table id="DataList1__ ctl12_newQuesti onPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1 :_ctl12:newQues tion" type="text"
size="20" id="DataList1__ ctl12_newQuesti on" />
<div align="right">
<a id="DataList1__ ctl12_btnAdd">t est</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
*************** *************** *************** *************** ********** *************** ******

If you take out the <div> tags, the word test will be directly after >> the text box with the height of the cell the same as the
text box. I >> wanted to put the link all the way to the right
without creating >> another cell and the only way I could seem to
sort of get it to work >> was the above way.
The problem is that the height of the cell doubles and the work
"test" goes all the way to the right, but down to the bottom of the
cell (below the text box).

Why is it doing this and how do I get it to directly to the right of >> the textbox?
Thanks,

Tom.

Nov 19 '05 #7

Similar topics

12437

vertical-align on span that resides inside a table cell

by: kAldam | last post by:

I am currently using IE 6.0 and 5.5 and the scenario is the following. I have a span that contains text, and the span is beign contained by a table cell (this is the way thing need to be in my application). I have an issue when the span has a heigth less than 18px (meaning height of the span, there is only one line of text and the height of the text is less than 18). The issue is that I start getting a padding, I add a color background to...

HTML / CSS

66041

vertical-align:bottom not working

by: Markus Ernst | last post by:

Hi I have a strange problem with vertical-align. The case can be viewed at http://www.brainput.info/geschichte.html. HTML code: <div id="bild"><img src="geschichte.gif" width="274" height="29" alt="Wir schreiben die Geschichte Ihres Unternehmens."></div>

HTML / CSS

2805

align batch of spans with float:left to a new block

by: TJ | last post by:

I've got a calendar that is based on the concept of lots of blocks that are spans with float:left. I would like to be able to have a detail section on the right side of the screen, so that when the user selects an item on the calendar, the detail can get displayed on the right side there. What I have below appears to look perfect in mozilla based browsers - the detail is aligned at the top right corner of the calendar, but in IE the...

HTML / CSS

2761

How to align elements and define resize behaviour?

by: Alex Blekhman | last post by:

Hello, I'm experienced Windows programmer, however, I'm quite novice in HTML technologies. Recently I was assigned a task to write small utility for internal use in our development team. I chose to write its GUI in HTML and make front end as HTA. While developing application's logic is no problem the HTML layout and properties require some additional efforts. So, I

HTML / CSS

2260

vertical-align

by: shivas | last post by:

Hi, I am using vertical-align for a table row, but the Image and the text are not aligned properly. I don't what to align image in the img tag, rather in the row itself I want to align. I want to align both text and the image (some time appended in the same cell) in the top. Can anyone help me in this? --

HTML / CSS

4422

vertical align with not specified height

by: acunnon | last post by:

I am trying to put together an login page my problem is getting the three items aligned to the middle verticaly without specifing a height to anything on the page. CSS html{ height:100%; min-height:100%; } body{ vertical-align:middle;

HTML / CSS

15563

FireFox CSS - overflow:hidden with vertical-align

by: esteuart | last post by:

I need to get the right combination for a div to clip any text inside and allow vertical alignment. I only have this problem in FireFox. I have 3 divs nested within each other. The outer div has display of table, the first inner div has display of table-cell and the inner-most div has the text. The outer div has a set width and height. So here's the problem: Without the inner divs having a width and height set, the overflow:hidden doesn't...

HTML / CSS

5494

vertical-align...

by: maya | last post by:

hi, how do I get text to vertical-align inside a div? http://www.mayacove.com/misc/home.html vertical-align should work, according to this: http://htmlhelp.com/reference/css/text/vertical-align.html

HTML / CSS

27106

Vertical align in block link?

by: Patrick | last post by:

Hello, I'm trying to align a text vertically in a link displayed as a block. But the text is always at top. Is there a solution? Your advices are welcome. Here is a test page: <html>

HTML / CSS

8826

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9316

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9241

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8239

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6793

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6073

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

3303

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2777

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2211

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General