Align right increasing height of cell

T

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

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

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)

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

tshad

bruce barker said:
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>
Click to expand...

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

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
 
T

tshad

James Thomas said:
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.
Click to expand...

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

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Align separate li to right 2
Image shifts to the right when export the page to pdf 4
Having trouble centering contents of td ? 3
Align img inside nav tabs section 5
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
Can someone pls help me with a little algorithm script 1
Help with Visual Lightbox: Scripts 2

Members online

No members online now.
Total: 262 (members: 0, guests: 262)
Robots: 330

Forum statistics

Threads
474,432
Messages
2,571,680
Members
48,796
Latest member
Greg L.

Latest Threads

Top