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_newQuestionPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1:_ctl12:newQuestion" type="text" size="20"
id="DataList1__ctl12_newQuestion" />
<div align="right">
<a id="DataList1__ctl12_btnAdd">test</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 Post Reply

1769

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_newQuestionPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td>
<input name="DataList1:_ctl12:newQuestion" type="text" size="20"
id="DataList1__ctl12_newQuestion" /></td>
<td align="right"><a id="DataList1__ctl12_btnAdd">test</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**********@ftsolutions.com> wrote in message
news:u3**************@TK2MSFTNGP11.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_newQuestionPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1:_ctl12:newQuestion" type="text" size="20"
id="DataList1__ctl12_newQuestion" />
<div align="right">
<a id="DataList1__ctl12_btnAdd">test</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:newQuestion" type="text" size="20"
id="DataList1__ctl12_newQuestion" /></td>
<td align=right><a id="DataList1__ctl12_btnAdd">test</a></td>
</table>

-- bruce (sqlwork.com)

"tshad" <ts**********@ftsolutions.com> wrote in message
news:u3**************@TK2MSFTNGP11.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_newQuestionPanel" cellpadding="0"
| cellspacing="0" border="0" width="100%">
| <tr>
| <td>
| <input name="DataList1:_ctl12:newQuestion" type="text" size="20"
| id="DataList1__ctl12_newQuestion" />
| <div align="right">
| <a id="DataList1__ctl12_btnAdd">test</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**************@tk2msftngp13.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:newQuestion" type="text"
size="20"
id="DataList1__ctl12_newQuestion" /></td>
<td align=right><a id="DataList1__ctl12_btnAdd">test</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**********@ftsolutions.com> wrote in message
news:u3**************@TK2MSFTNGP11.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_newQuestionPanel" cellpadding="0"
| cellspacing="0" border="0" width="100%">
| <tr>
| <td>
| <input name="DataList1:_ctl12:newQuestion" type="text" size="20"
| id="DataList1__ctl12_newQuestion" />
| <div align="right">
| <a id="DataList1__ctl12_btnAdd">test</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_newQuestionPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1:_ctl12:newQuestion" type="text"
size="20" id="DataList1__ctl12_newQuestion" />
<div align="right">
<a id="DataList1__ctl12_btnAdd">test</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.supernews.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_newQuestionPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1:_ctl12:newQuestion" type="text"
size="20" id="DataList1__ctl12_newQuestion" />
<div align="right">
<a id="DataList1__ctl12_btnAdd">test</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">Whatever
<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.supernews.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_newQuestionPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1:_ctl12:newQuestion" type="text"
size="20" id="DataList1__ctl12_newQuestion" />
<div align="right">
<a id="DataList1__ctl12_btnAdd">test</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

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...

HTML / CSS

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"...

HTML / CSS

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...

HTML / CSS

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...

HTML / CSS

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...

HTML / CSS

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%;...

HTML / CSS

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...

HTML / CSS

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:...

HTML / CSS

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

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

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...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

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...

General

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,...

Career Advice

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...

C# / C Sharp

Align right increasing height of cell

Similar topics